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Web 开发 技术 是 IT 应 用 型 人 才 应 该 具备 的 关键 技能 之 一 ,本 
书 以 Web 开发 为 背景 ,力图 系统 ,全面 地 介绍 Web 应 用 开发 所 涉及 
的 内 容 , 由 浅 入 深 地 展开 ,在 内 容 和 结构 安排 上 力求 做 到 系统 性 和 
连贯 性 。 本 书 共 5 章 , 可 分 为 3 部 分 。 第 一 部 分 包括 第 1~3 章 , 主 
要 介绍 Web 应 用 与 开发 的 基本 概念 与 特征 ,以 HTML, CSS, 
JavaScript 技术 为 主 ,介绍 静态 页 面 制作 ,同时 辅 以 案例 进行 说 明 。 
第 二 部 分 包括 第 4 章 , 以 ASP. NET 技术 为 主 ,介绍 一 个 网 上 书城 
的 开发 。 第 三 部 分 包括 第 5 章 , 以 Java 技术 为 主 的 一 个 在 线 通讯 录 
的 开发 。 

本 书 的 特点 是 实用 性 强 。 文 中 所 选取 的 实例 , 均 是 在 Web 开发 
中 所 需要 解决 的 实际 问题 ,这 些 实例 不 但 能 够 说 明 问 题 ,而 且 具 有 
很 强 的 实用 性 ,读者 只 需 将 某 些 代码 更 改 为 自己 的 网 页 中 相应 的 内 
容 , 便 可 方便 地 让 自己 的 网 页 有 同样 精彩 的 动态 效果 。 

本 书 在 介绍 实例 的 同时 ,也 向 读者 介绍 了 程序 的 设计 思想 ,使 
读者 能 够 举一反三 ,运用 所 学 知识 设计 更 多 的 实用 程序 。 在 设计 实 
例 的 过 程 中 ,本 书 不 仅 考虑 了 网 页 的 功能 ,而 且 对 网 页 的 美观 和 布 
局 也 进行 了 考虑 。 

学 习 计算 机 程序 设计 的 最 好 方法 是 实践 ,因此 建议 读者 上 机 编 
5 .运行 和 调试 本 书 所 给 的 例 程 。 本 书 中 的 所 有 程序 都 在 Web 环境 
中 调试 通过 ,可 以 帮助 读者 通过 上 机 实践 来 检查 自己 对 书 中 内 容 的 
理解 和 掌握 程度 。 

学 习 是 一 个 慢 慢 体会 的 过 程 ,同时 也 是 一 个 逐渐 发 现 的 过 程 ， 
一 个 人 能 够 学 习 、 积 累 、 总 结 和 思考 ,这 将 是 很 幸福 的 。 

本 书 由 马 瑞 新 、 原 旭 编 著 , 参 与 本 书 编写 的 还 有 刘畅 、 王 永山 、 
举 亚 杰 。 同 时 也 感谢 大 连理 工大 学 软件 学 院 的 全 体 同 学 ,是 他 们 热 
情 地 支持 和 鼓励 让 我 有 信心 完成 此 书 的 创作 ,每 当 我 快要 放弃 时 ， 
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总 是 他 们 给 予 我 力量 ,我 特 将 此 书 作为 他 们 的 礼物 ,希望 我 们 一 起 在 软件 开发 上 更 上 一 
层 楼 。 

由 于 作者 水 平 有 限 ,加 之 时 间 仓 促 , 书 中 的 错误 之 处 在 所 难免 , 敬 请 广大 专家 、 读 者 
TEME, PUGH. 


马 瑞 新 
2012 4£ 9 月 
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Web 技术 基础 


1.1 HTIML 和 标签 


在 当今 社会 ,网 络 已 成 为 人 们 生活 的 一 部 分 ,网 络 提供 的 服务 主要 以 网 页 形式 展现 
出 来 ,HTML 是 创建 网 页 的 基础 语言 ,如 果 不 了 解 HTML ,就 谈 不 上 网 页 设计 。HTML 
的 英文 全 称 是 HyperText Marked Language. 中文 叫做 “ 超 文 本 标记 语言 "。 对 HTML 
的 编辑 使 用 普通 的 文本 编辑 器 即 可 (记事 本 、Editplus 等 ) 。 

HTML 是 Web 用 于 创建 和 识别 文档 的 标准 语言 ,这 些 标记 都 是 通过 使 用 标签 来 完 
成 的 ,标签 可 指定 网 页 在 浏览 器 中 的 显示 方式 。 本 章 介 绍 HTML 文件 的 基本 结构 和 相 
关 标 签 等 。 

完整 的 HTML XEDE <HTML> HRE <HEAD> HRE <TITLE> PR M 
<BODY> PRZ .Jf- HX teg A6 ABERAT Hh AS, AREAS RREA S ,在 
这 两 个 标签 之 间 添 加 内 容 。 通 过 这 些 标签 中 的 相关 属性 可 以 设置 页 面 的 背景 色 .背景 图 
片 等 。 

HTML 文档 主要 由 以 下 三 部 分 组 成 。 

(D HTML 部 分 : HTML 部 分 是 以 二 HTML> 标 签 开 始 ,以 二 /HTML> 标 签 结 束 。 


<HTML> 

AES 

<HTML> fg 4£ £5 VE QU Vi d 3x P983 4 bg 4 27 IR] H9 3 226 HTML 文档 。 

(2) 头 部 : SEHBEA HEAD RER HA, </HEAD> REAR., X UA GL ER 
TE We Opi pt rp S d SURE ftbi I] vt PAS BE SR HU fnm. BR GL E <TITLE> fl 
</TITLE> fs & Z. [8] 。 

«X HEAD» 

<TITLE>…< /TITLE> 
< HEAD» 


(3) 主体 部 分 : 主体 部 分 包含 在 网 页 中 显示 的 文本 .图 像 和 链接 。 主 体 部 分 以 
<BODY> fi 3f f - </BODY> bg A b 
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<BODY> 


< /BODY> 


值得 注意 的 是 标签 不 区 分 大 小 写 ,可 以 使 用 二 html> 来 代替 二 HTML>。 
HTML 文档 的 结构 如 下 : 


<HIML> 

«HEAD» 

<TITLE> 我 的 第 一 个 网 页 </TITLE> 

< /HEAD> 

<BODY > 

Hello World! 

< /BODY» 

</HTML> 

创建 网 页 也 非常 简单 ,只 需要 按照 下 面 的 步骤 完成 即 可 。 

使 用 记事 本 创建 网 页 的 步骤 ， 

(1) 打开 记事 本 ， 

(2) 输入 HTML 代码 ; 

(3) 保存 为 *. html 或 *.htm 文件 .注意 格式 问题 ; 

(4) 打开 网 页 预览 效果 。 

过 META> 标 签 出 现在 网 页 的 标题 部 分 ,这 是 一 个 特殊 的 HTML 标签 ,提供 有 关 网 
页 的 信息 。 有 时 访问 网 页 时 发 现 文字 是 乱码 ,其 实 就 是 没有 正确 设置 <META> 二 标签 中 
charset 属性 。 如 要 将 gb2312 指定 为 默认 字符 集 类 型 , 则 使 用 以 下 和 META 标签 ; 

<META http- equiv= "Content- Type" content- "text/html; charset-gb2312"» 

« TITLE» 网 页 标题 < /TITLE> 

< /HEAD> 
其 中 charset 用 于 设置 网 页 的 编码 语系 ,简体 中 文 使 用 charset 二 gb2312, 繁 体 中 文 使 用 
charset 王 big5 , 纯 英 文 网 页 建议 使 用 iso-8859-1, 或 者 不 设 编 码 也 可 ,网 页 会 根据 系统 所 
在 国家 或 页 面 主体 所 对 应 的 编码 体系 来 正确 设置 charset。 

在 默认 情况 下 ,使 用 Web 浏览 器 浏览 网 页 时 ,其 背景 色 是 白色 ,如 果 我 们 想 把 背景 
色 换 成 好 看 的 颜色 或 图 片 怎 么 办 ? 其 实 很 简单 ,使 用 bgcolor 属性 可 以 改变 网 页 的 背景 
色 ,使 用 background 属性 可 以 把 网 页 色 背 景 设 为 图 片 。 


< BODY bgcolor= "# FFCCFF" background- "back image.GIF" > 
Hello World! 
< /BODY> 


文本 是 网 页 不 可 缺少 的 元 素 之 一 ,是 网 页 发 布 信息 所 采用 的 主要 形式 ,为 了 让 网 页 
中 的 文字 看 上 去 编排 有 序 ,整齐 美观 .错落 有 致 ,我 们 就 要 设置 文本 的 大 小 .颜色 .字体 类 
型 及 换行 等 。 
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文本 相关 的 标签 大 都 放 在 BODY 标记 内 。 常 用 的 标签 有 字体 标签 .图片 标签 、 超 链 
接 标签 ,列表 标签 .表格 、 表 单 、 块 级 元 素 (div 和 span). 


1. 字体 标签 


基本 语法 : <FONT face— "3E-B" size="5" color="bule">***</FONT> 


<HIML> 
<BODY> 
<FONT face- "隶书 " size- "5" color- "bule"> HTML 字体 标签 实例 < /FONT> 
</BODY> 
< /HTML» 


2. 图 片 标签 


<HTML> 
<BODY> 
«IMG src=" demopic.jpg"  width- "200" height- "100" border- "5"> 
< /BODY> 
< /HTML» 


其 中 sre 属性 表示 图 片 的 路 径 和 文件 名 ,width 和 height 为 宽 和 高 ,border 为 边线 宽度 。 
3. 超 链接 标签 


基本 语法 <A href— "address. html">**</A>, 二 A 二 是 Anchor( 锚 ) 的 缩写 ,从 
一 个 页 面 链接 到 另 一 个 页 面 。 


<HTML> 
<BODY> 
<A href=" http://www.sina.com.cn" > 链接 到 新 浪 网 站 < /a> 
< /BODY> 
< /HTML» 


4. 列表 标签 
有 两 种 方式 ,有 序列 表 和 无 序列 表 。 


<HIML> 
<BODY> 
有 序列 表 
«or 
«LI» HTML 编程 基础 < /LI> 
«LI» CSS 基础 < /LI> 
«LI» javascript 编程 基础 < /LI> 
</OL> 
无 序列 表 


4.122552 


«Ur» 
« LI» HTML 编程 基础 < /LI> 
«LI» CSS 基础 < /LI> 
«LI» javascript 编程 基础 < /LI> 
</UL> 
< /BODY> 
< /HTML» 


5. 表格 标签 
X A dRAE- TABLE -—TR--—TD- 


«HTML» 
« BODY» 
< TABLE border- "1"> 
« TR» « TD» 11« /TD>< TD» 12« /TD>< /TR> 
« TR» < TD» 21« /TD>< TD» 22« /TD>< /TR> 
< TR» < TD» 31« /TD» < TD» 32« /TD> < /TR> 
< /TABLE> 
< /BODY» 
< /HTML» 


跨行 跨 列 是 利用 rowspan 和 colspan 设置 跨行 跨 列 。 


«HTML» 
« BODY» 
< TABLE border- "1"> 
<TR><TD rowspan= "2"> 跨 两 行 < /TD» < TD colspan= "2"> 跨 两 列 < /TD> < /TR> 
« TR» « TD» 1000« /TD> « TD» 1000« /TD> < /TR> 
< TR» « TD» 1000« /TD» < TD» 3000« /TD» < TD» 4000« /TD» < /TR> 
< /TABLE» 
< /BODY» 
</HTML> 


cellpadding 和 cellspacing 属性 的 使 用 ,前 者 是 单元 格 的 边 距 , 即 字 与 单元 格 边框 的 
距离 。 后 者 指 单元 格 间距 。 


<HIML> 
<BODY> 

< TABLE border= "1" cellpadding- "10" cellspacing- "0"> 
<TR><TD> 第 一 行 第 一 列 < /TD><TD> 第 一 行 第 二 列 < /TD>< /TR> 
<TR><TD>1 第 二 行 第 一 列 </TD><TD> 第 二 行 第 二 列 < /TD>< /TR> 

< /TABLE> 

<BR> 

< TABLE border- "1" cellpadding- "0" cellspacing= "10"> 
«TR» « TD» 55 — £158 — 9i] « /TD» « TD» 58 — íT — 9] « /TD>< /TR> 
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«TR» « TD» 1 55 — (£138 — 9| « /TD» « TD» 9B — 1338 — 9] « /TD>< /TR> 
< /TABLE» 
< /BODY> 
< /HTML> 


表格 样式 : 
可 以 用 过 bordercolor 设置 表格 边框 颜色 .bgcolor 设置 背景 颜色 ,align 设置 表格 的 
对 齐 方式 。 


<HIML> 
«BODY» 
< TABLE border- "4" bordercolor- "orange"» 
X TR bgcolor= "orange" align="middle"> 
« TD» « font color- "white"><B> 序 号 < /B» « /FONT» « /TD> 
« TD» « font color- "white"» « B» lE 4 < /B» « /FONT» < /TD> 
« TD» « font color- "white"><B> 高 数 < /B>< /FONT» < /TD> 
«TD» « font color- "white"» « B» ifi X « /B» « /FONT» < /TD> 
« TD» « font color- "white"» «B» fX fF T. fé « /B» « /FONT» « /TD> 
«/TR» 
<TR align="middle"> 
« TD» 1< /TD><TD> 杨 过 < /TD> < TD» 150< /TD><TD>150< /TD> < TD» 150« /TD>< /TR» 
<TR align- "middle"><TD>2< /TD><TD> 小 龙 女 
< /TD> < TD» 150« /TD> < TD» 150< /TD> < TD» 150« /TD>< /TR> 
< /TABLE» 
< /BODY» 
< /HTML» 


6. 表单 标签 


通用 格式 : <form method— "Post" action— "do. submit. jsp" >*#+*</form> 

Post 方式 在 浏览 器 的 地 址 栏 中 不 显示 提交 的 信息 ,这 种 方式 传输 数据 没有 数据 量 的 
限制 ;Get 方法 将 信息 传递 到 浏览 器 的 地 址 栏 上 ,最 大 传输 信息 量 是 2KB。 不 指明 ,默认 
是 Get 方式 。 


<HIML> 
«BODY» 
< FORM method= "Post" action- "do submit.jsp"» 
用 户 名 : <INPUT type="text" name= "user id"»«BR» 
密码 : < INPUT type="text" name- "user pwd"» «BR» «BR» 
< INPUT type- "Submit" value- "提交 " name= "btn submit"» 
< INPUT type= "Reset" value- "Hi *j" name- "btn reset" 
< /FORM> 
< /BODY> 
< /HIML> 


,siss sn 


7. DIV 和 SPAN 标签 


<HIML> 
<BODY> 
<DIV id- "divl" style= "background:yellow"> 这 是 一 个 DIV< /DIV> 
<SPAN id- "spanl" style- "background:yellow"> 这 是 一 个 SPAN < /SPRN > 
< /BODY> 
< /HTML» 


8. 其 他 常用 标签 


包括 文本 框 , 文 本 区 域 .密码 框 、 多 选 框 , 单 选 框 和 下 拉 框 等 。 除 了 文本 区 域 和 下 拉 
框 ,其 他 的 只 需要 修改 type 属性 即 可 。 


<HIML> 
<BODY> 

< INPUT type="text" name- "text" value- "文本 框 "> 
« INPUT type- "password" name- "text" value=" 密码 框 "> 
< INPUT type="checkbox" name- "text" value=" 多 选 框 "> 
< INPUT type="radio" name- "text" value=" 单 选 框 "> 
< TEXTAREA NAME- "textareal" ROWS- "5" COLS- "10"» < /TEXTRRER> 
< SELECT NAME- ""» < /SELECT> 

< /BODY> 

< /HTML> 


1.2 HTML EZ 


热衷 于 上 网 的 用 户 经 常会 在 网 上 看 到 一 些 注册 页 面 、 购 买 商品 搜集 信息 页 面 \ 网 上 
调查 问卷 页 面 .搜索 工具 页 面 等 ,这 些 页 面 都 包含 有 表单 ,如 图 1. 1 所 示 。 

网 页 中 的 表单 用 途 很 广 , 而 且 还 在 不 断 发 展 。 典 型 的 表单 应 用 如 下 所 示 。 

(OD 注册 用 户 。 

(2) 收集 信息 。 

(3) 反馈 信息 。 

(4) 为 网 站 提供 搜索 工具 。 

创建 表单 后 ,就 可 以 在 表单 中 放置 控件 以 接受 用 户 的 输入 。 这 些 控件 通常 放 在 
二 FORM> 二 /FORM> 标 签 之 间 一 起 使 用 .也 可 以 在 表单 之 外 用 来 创建 用 户 界面 。 在 
网 上 访问 时 ,会 经 常 看 到 一 些 常 用 的 控件 ,例如 ,让 用 户 输入 姓名 的 单行 文本 框 , 让 用 户 
输入 密码 的 密码 框 ` 让 用 户 选择 性 别 的 单 选 按钮 以 及 让 用 户 提交 信息 的 提交 按钮 等 。 

不 同 表单 控件 有 不 同 的 用 途 。 如 果 要 求 用 户 输 入 仅仅 是 一 些 文字 信息 ,如 “姓名 ”、 
“备注 >“ 留言 ?等 ,一 般 使 用 单 选 按钮 、 复 选 框 和 下 拉 列 表 框 ,如 图 1.2 所 示 。“ 性 别 ”、 
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2. 收 电子 邮件 > 3. 注 册 成 功 


于 20 个 宇 符 CIAM. AF THE. PX, EM 
se T 


SRI THER, WE*REITSYETRNSDESY 
玛 ,不 能 单独 信用 英文 字母、 数字 或 符号 作为 修 的 密码 。 怎 洋 设 置 
安全 性 高 的 密码 ? 


ERIS RE EON 00893. 


请 填写 常用 的 电子 邮件 地 址 ， 冤 宝 需要 您 通过 邮件 完成 注册 。 


如果 你 还 没有 固定 邮箱 ， 强 型 建议 您 广 册 付 虎 3. 56 免 费 超 大 邮箱 ,就 可 以 享受 免 注 活 注册 了 ， 
设 有 电子 邮件 3 推荐 供用 搜狐 地 箱 和 同 昌 邮 箱 。 


语 末 绩 入 一 吉 上 面 策 入 的 电子 部 件 地 址 。 


[ 3 VSB WAAANFE ETRE ATEK. EIS AT 


图 1.1 包含 表单 的 注册 页 面 


爱好 ”*“ 出 生日 期 "中 的 月 份 选择 等 常 采用 这 些 控 件 , 如 果 要 把 填写 好 的 表单 信息 提交 
给 服务 器 ,一 般 使 用 “提交 ”按钮 ,其 他 一 些 不 太 常 用 的 表单 控件 就 不 一 一 列举 了 。 


单行 文本 输入 框 
(TEXT) 


密码 框 
i i c Pes (PASSWORD) 
(RADIO) fi 


图 1.2 常见 表单 控件 


< 二 FORM 二 标签 用 于 在 网 页 中 创建 表单 区 域 ,属于 一 个 容器 标签 ,表示 其 他 表单 标 
签 需要 在 它 的 包围 中 才 有 效 ,一 input 二 便 是 其 中 一 个 。 用 于 设 定 各 种 输入 资料 的 方法 。 
<FORM> TR I TEE PP: action 和 method 
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action; 此 属性 指示 服务 器 上 处 理 表 单 输出 的 程序 。 一 般 来 说 , 当 用 户 单 击 表单 上 的 
“提交 ”按钮 后 ,信息 发 送 到 Web 服务 器 上 ,由 action 属性 所 指定 的 程序 处 理 。 语 法 为 : 
action— "URL", 

method; 此 属性 告诉 浏览 器 如 何 将 数据 发 送 给 服务 器 , 它 指 定向 服务 器 发 送 数 据 的 
方法 (用 post 还 是 get) 。 如 果 值 为 get ,浏览 器 将 创建 一 个 请 求 , 该 请 求 包含 页 面 URL, 
一 个 问号 和 表单 的 值 。 浏 览 器 会 将 该 请 求 返 回 给 URL 中 指定 的 脚本 ,以 进行 处 理 。 如 
果 将 值 指定 为 post, 表 单 上 的 数据 会 作为 一 个 数据 块 发 送 到 脚本 ,而 不 使 用 请 求 字符 串 ， 
语法 为 : method= (get| post). 

示例 1. 1 演示 post 和 get 方法 的 区 别 。 

示例 1.1 


<HIML> 

< HEAD» 

<META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
« TITLE» get 和 post 区 别 演示 < /TITLE> 

< /HEAD> 


< BODY» 
< FORM name= "forml" method= "post" action=""> 
<P> 名 字 : 
< INPUT name= "name" type= "text" class="input" id= "fname"> 
</P> 
<PH: 
< INPUT name= "pass" type- "password" class= "input" id= "pass"> 
</P> 
<P> 
< INPUT type="submit" name- "Button" value= "提交 "> 
< INPUT type= "reset" name= "Reset" value- "Hifi "> 
</P> 
< /FORM> 
< /BODY> 


在 示例 1. 1 中 , 若 把 method — "post" PEJJ method — "get" WE T fH] get 方法 将 
表单 提交 给 服务 器 。 这 两 种 方法 有 什么 区 别 呢 ? 

先 看 看 使 用 post 和 get 方法 提交 表单 后 浏览 器 地 址 栏 的 变化 ,如 图 1. 3 所 示 , 这 是 
采用 post 方法 提交 的 表单 ,浏览 器 地 址 栏 前 后 没有 变化 。 

如 图 1.4 Bros ,这 是 采用 get 方法 提交 的 表单 ,浏览 器 地 址 栏 前 后 没有 变化 。 

在 浏览 器 地 址 栏 中 能 看 到 “get_show. html? name= mike8&-pass— 123" . 3x HE Sc sb 
刚才 输入 的 用 户 名 和 密码 。 巾 此 可 见 ,使 用 post 方法 提交 的 表单 信息 更 安全 ,相反 ,使 用 
get 方法 提交 表单 信息 极 不 安全 ,建议 大 家 在 使 用 表单 时 尽 可 能 使 用 post 方法 来 传送 
数据 。 

网 页 中 的 表单 由 许多 不 同 的 表单 元 素 组 成 .这 些 表单 元 素 各 自 都 有 很 多 属性 ,下 面 
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人 @ get 和 post 区 演示 - 世界 之 窗 3.6 HE mi XS 
4 -Q Z & A H [D riey/Fpostshowhtmi -| [加 -人 Ey 


和 名字 e | 
gu. e 
[EX (SR) 


图 1.3 采用 post 提交 表单 


V sctfüpostEBIRT ERZE 315 HD SEV NB) AC) WM) 
IP. Q Z Q «dr [Pwntminame-mike&pass-2 -| 中 | (Az) (BI. exces 


[ED -mposE 引 六 示 B getfüpostEEUR 


名 字 ， 
密码 ， 


& 9€ B & € Q 10x - 
图 1.4 采用 get 提交 表单 


对 这 些 表单 元 素 中 一 些 常用 的 属性 做 一 个 统一 介绍 。 
下 面 给 出 表单 元 素 的 统一 格式 : 


< FORM name= "form3" method= "post" action=""> 
< INPUT type="checkbox" name- "gen" value=" 男 " 
size= "21" maxlength= 4 checked= "checked"> 


< /FORM> 


1. 文本 框 


在 表单 中 最 常用 的 表单 输入 元 素 就 是 文本 框 (text) , 它 提供 给 用 户 输入 单行 文本 信 
息 ,例如 用 户 名 的 输入 框 。 如 要 在 表单 里 创建 一 个 文本 框 ,将 type 属性 改 为 text 就 可 以 
了 ,如 示例 1.2 所 示 。 

示例 1.2 


<HIML> 

« HEAD» 

«META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
<TITLE> 文 本 框 练习 < /TITLE> 

< /HEAD> 


,iss sn 


< BODY» 
< FORM name= "forml" method= "post" action=""> 
<P> 名 &nbsp; &nbsp; F : 
<INPUT type="text" value- "5K =" size- "20" name- "fname"» 
</P> 
<P> 姓 &nbsp; &nbsp; I& : 
< INPUT name= "lname" type= "text"> 
</P> 
<P> 登 录 名 : 
< INPUT name= "sname" type="text" size="20"> 
</P> 
< /FORM> 
< /BODY> 
< /HTML> 


2. 密码 框 


只 需 将 文本 框 的 type 属性 设 为 password 就 可 以 创建 一 个 密码 框 。 密 码 框 的 各 属性 
和 文本 框 一 样 ,唯一 不 同 的 就 是 密码 框 输入 的 全 部 字符 都 以 * 显示 ,如 示例 1. 3 所 示 。 
示例 1.3 


<HIML> 

< HEAD» 

<META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
< TITLE» 8f l3 HE< /TITLE> 

< /HEAD> 


<BODY> 
< FORM name= "form2" method= "post" action=""> 
<P> 用 户 名 : 
< INPUT name= "name" type="text" size="21"> 
</P> 
<P> 密 gnbsp;&nbsp; 码 : 
< INPUT name= "pass" value- "123456" type="password" size-"22"» 
</P> 
< /FORM> 
< /BODY> 
< /HTML> 


3. 单 选 按钮 


将 文本 框 表单 元 素 type 属性 设 为 radio 就 可 以 创建 一 个 单 选 按钮 。 单 选 按钮 控件 
用 于 一 组 相互 排斥 的 值 , 组 中 每 个 单 选 按钮 控件 应 具有 相同 的 名 称 , 用 户 一 次 只 能 选择 
一 个 选项 。 只 能 从 组 中 选 定 的 单 选 按钮 才 会 在 提交 的 数据 中 生成 name/value 对 , 单 选 
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按钮 需要 有 一 个 用 来 显示 的 value 属性 ,如 示例 1.4 所 示 。 
示例 1.4 


<HTML> 
«X HEAD» 

« TITLE» Hf 3 f H< /TITLE> 
< /HEAD> 


«BODY» 
< FORM name= "form3" method= "post" action- ""» 
<BR> 性 别 : 
< INPUT name- "gen" type- "radio" class- "input" value= " 男 checked= "checked"» 
< IMG src- "images/Male.gif" width- "23" height- "21"» Jj &nbsp; 
< INPUT name= "gen" type="radio" value- "i" class-"input"» 
< IMG src= "images/Female.gif" width- "23" height- "21"» Zr 
< /FORM> 
< /BODY» 
< /HTML» 


运行 界面 如 图 1.5 所 示 。 


XD ”查看 VM) 收藏 B) IAD 帮助 H) 下 一 口 x 


ID. OFA Ak [E l laz B. sex aj» 


性 别 ，@ Bs o Mz 


CESSIT 1 100» - 
图 1.5 单 选 按钮 


4. 复 选 框 


将 上 述 表单 type 属性 设 为 checkbox 就 可 以 创建 一 个 复 选 框 。 用 户 可 以 选择 多 个 复 
选 框 ,如 示例 1.5 所 示 。 
示例 1.5 


<HIML> 
< HEAD» 

<META http- equiv= "Content- Type" content= "text/html; charset= gb2312"> 
<TITIE> 复 选 框 < /TITLE> 

< /HEAD> 


<BODY> 
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< FORM name= "form4" method= "post" action=""> 
爱好 : 
« LABEL» 
< INPUT type= "checkbox" name= "cbl" value- "sports" > 
< /LABEL»j& 5] &nbsp; &nbsp; 
«LABEL» 
< INPUT type= "checkbox" name= "cb2" value- "talk"checked- "checked" 
< /LABEL» WI X &nbsp;&nbsp; 


«LABEL» 
< INPUT type= "checkbox" name= "cb3" value- "play"? 
< /LABEL> 玩 游戏 
< /FORM> 
< /BODY> 
< /HTML» 
运行 界面 如 图 1.6 Br 
Q sum -世界 之 窗 3.5 文件 日 ZH) WO IAD WM) F -Dx 
ID. @FAAk D le las (Bsr — aj» 
[+ + sas a aaki 
受 好， 回 运动 ”图 聊天 回 玩 游戏 
完成 CEE TT d A. 
图 1.6 复 选 框 
5. 列表 框 


列表 框 主要 是 为 用 户 快速 .方便 .正确 地 选择 一 些 选项 ,而 且 还 能 节省 页 面 空 间 ， 
是 通过 一 select 二 和 二 option 二 标签 来 实现 的 ,如 示例 1.6 所 示 。 
示例 1.6 


<HIML> 

« HEAD» 

«META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
<TITLE> 列 表 框 < /TITLE> 

< /HEAD> 


<BODY> 

< FORM name- "form5" method- "post" action=""> 

出 生日 期 : 
< INPUT name= "byear" value- "yyyy" size- 4 maxlength- 4» 
&nbsp; £F 


z0- 
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< SELECT name= "bmon"> 

<OPTION value="" selected="selected"> [选择 月 份 ]< /OPTION> 
<OPTION value= 0> 一 月 < /OPTION> 
<OPTION value= 1» — J] < /OPTION» 
<OPTION value= 2» = J] < /OPTION> 
<OPTION value= 3> 四 月 < /OPTION> 
<OPTION value= 4> 五 月 </OPTION> 
«OPTION value= 5> 六 月 </OPTION> 
«OPTION value= 6> 七 月 < /OPTION> 
<OPTION value=7> 八 月 < /OPTION> 
<OPTION value= 8> 九 月 < /OPTION> 
<OPTION value= 9> 十 月 < /OPTION> 
<OPTION value=10> 十 一 月 < /OPTION> 
<OPTION value=11> 十 二 月 < /OPTION> 


< /SELECT> 
月 gnbsp; 
< INPUT name= "bday" value= "dd" size=2 maxlength=2 > 
日 
< /FORM> 
< /BODY> 
< /HTML> 
运行 界面 如 图 1.7 Bros. 
FRE- ERZE 16 XO HIV t80 IAD PH F-X 
IP- OAA (o-a lay (B. ener aJ» 
ŁAN: my ip OGRRAS)- 月 ad B 
ETRAS GRE. 
图 1.7 列表 框 
6. 按钮 


按钮 在 表单 中 经 常用 到 ,在 HTML 中 按钮 分 为 3 种 ,分 别 是 普通 按钮 (button)、 提 


交 按 钮 (submit) 和 重 置 按钮 (reset) ,如 示例 1.7 所 示 。 
示例 1.7 


<HTML> 

<HEAD> 

<META http- equiv- "Content- Type" content= "text/html; charset= gb2312"> 
«TITLE» f ffl « /TITLE> 


< /HEAD> 
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<BODY> 
< FORM name= "forml" method= "post" action=""> 
<P> 用 户 名 : 
< INPUT name= "name" type="text" size- "21"» 
</P> 


<P> 密 gnbsp; gnbsp; 码 : 
< INPUT name= "pass" type= "password" size="22"> 
</P> 
<P> 
< INPUT type- "reset" name= "Reset" value=" 重 填 "> 
< INPUT type- "submit" name= "Button" value= "同意 以 下 服务 条 款 ,提交 注册 信息 "> 
</P> 
<P> 
<INPUT type="button" name- "confirm" value= "点 播音 乐 "> 
<INPUT type="button" name= "cancel" value= "取消 "> 
</P> 
< /FORM> 
< /BODY> 
< /HTML» 


运行 界面 如 图 1.8 所 示 。 


Qm ume 36 XHD HEV dum) IAD = -Ox 

ID OAAR CO lea B. sr aJ 
EET: b ee | 

用 户 名 ， 

OS. 

E] & STEB di €» Q 100€ - 


图 1.8 按钮 


7. 多 行文 本 框 


多 行文 本 框 是 解决 在 网 页 中 输入 两 行 或 者 两 行 以 上 文本 ,如 示例 1. 8 Bron o 
示例 1.8 


<HIML> 

< HEAD» 

«META http- equiv- "Content- Type" content- "text/html; charset-gb2312"» 
«TITLE» 多 行文 本 框 < /TITIE> 

< /HEAD> 
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«BODY» 
< FORM name= "form?" method= "post" action= ""> 
« H4» « IMG src= "images/read.gif" width- "35" height- "26"> 阅 读 淘宝 网 服务 协议 < /H4> 
<P> 

< TEXTAREA name= "textarea" cols- "40" rows= "6"> 欢 迎 阅 读 服务 条 款 协议 ,本 协议 阐述 之 条 款 
和 条 件 适用 于 您 使 用 Taobao com 网 站 的 各 种 工具 和 服务 。 
本 服务 协议 双方 为 淘宝 与 淘宝 网 用 户 , 本 服务 协议 具有 合同 效力 。 
淘宝 的 权利 和 义务 
1. 淘宝 有 义务 在 现 有 技术 上 维护 整个 网 上 交易 平台 的 正常 运行 ,并 努力 提升 和 改进 技术 ,使 用 户 
网 上 交易 活动 的 顺利 。 
2. 对 用 户 在 注册 使 用 淘宝 网 上 交易 平台 中 所 遇 到 的 与 交易 或 注册 有 关 的 问题 及 反映 的 情况 , 淘 
宝应 及 时 作出 回复 。 
3. 对 于 在 淘宝 网 网 上 交易 平台 上 的 不 当 行 为 或 其 他 任何 淘宝 认为 应 当 终止 服务 的 情况 ,淘宝 有 
权 随 时 作出 删除 相关 信息 ,终止 服务 提供 等 处 理 , 而 无 须 征 得 用 户 的 同意 。 
4. 因 网 上 交易 平台 的 特殊 性 ,淘宝 没有 义务 对 所 有 用 户 的 注册 资料 .所 有 的 交易 行为 以 及 与 交易 
有 关 的 其 他 事项 进行 事先 审查 。 


行 界面 如 图 1.9 所 示 。 
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1.9 多 行文 本 框 


学 习 上 面 这 些 以 后 可 实现 一 个 综合 例子 ,如 示例 1.9 所 示 。 
示例 1.9 


<HTML> 

<HEAD> 

<META http- equiv- "Content- Type" content= "text/html; charset= gb2312"> 
<TITIE> 表 单 小 结 < /TITLE> 

< /HEAD> 
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«BODY bgcolor- "£FEFCCFE"- 
< CENTER» 
<P align- "center"»« FONT size- "5"» Hi iff Æ< /FONT» < /P» 
< FORM name= "forml" method= "post" action- ""» 
姓名 : <INPUT type- "text"»« BR» 
密码 : < INPUT type="password" size- "21"»« BR» 
感 兴趣 的 职位 : <BR> 
<INPUT type="radio" name- "CONTROL1" value- "0" checked>Web 设 计 
< INPUT type="radio" name= "CONTROL1" value- "1" >Web 开发 <BR> 
其 他 要 求 : <BR> 
< TEXTAREA name= "CONTROL3" cols="26" rows="5"> 包 括 薪水 待遇 .工作 地 点 
等 。< /TEXTAREA» < BR» 
< INPUT name- "CONTROL4" type="checkbox" checked» 发 送 确认 信息 <BR> 


经 验 :<BR> 
<SELECT name= "CONTROL2"> 
<OPTION> 无 经 验 < /OPTION> 
<OPTION>3 年 ”</OPTION> 
< /SELECT> 
<BR> 
&nbsp; &nbsp; 
< INPUT type="submit" name="submit1" value- "fj Ac" 
&nbsp; &nbsp; 
< INPUT type="reset" name= "resetl" value=" 重 置 "> 
< /FORM> 
< /CENTER> 
< /BODY> 
< /HIML> 


运行 效果 如 图 1. 10 所 示 。 


图 1.10 综合 示例 
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1.3 HTML 框架 


在 一 个 网 页 中 ,并 不 是 所 有 的 内 容 都 需要 改变 ,如 网 页 的 导航 栏 、 网 页 的 页 脚 等 部 分 
是 不 需要 改变 的 ,如 果 在 每 一 个 网 页 中 都 重复 添加 这 些 元 素 ,不 仅 会 浪费 时 间 , 而 且 在 浏 
览 时 也 会 带 来 不 便 、 耗 费 更 多 时 间 , 为 了 解决 这 些 问 题 ,可 以 使 用 框架 来 对 网 页 进行 
布局 。 

使 用 框架 可 以 把 浏览 器 划分 为 多 个 区 域 ,每 个 区 域 都 可 以 显示 不 同 的 网 页 ,每 次 浏 
览 者 在 访问 框架 页 面 时 ,只 下 载 框架 页 面 中 变化 的 区 域 ,对 于 不 变 的 区 域 ,不 用 重新 下 
载 ,从 而 给 浏览 者 带 来 方便 、 节 省 下 载 页 面 的 时 间 。 

一 个 框架 结构 由 框架 (Frame) 和 框架 集 (FrameSet) 两 部 分 组 成 。 

框架 (Frame) : 是 浏览 器 窗口 中 的 一 个 区 域 , 它 可 以 显示 与 浏览 器 窗口 其 余部 分 中 
所 显示 内 容 无 关 的 网 页 文件 。 

框架 集 (FrameSet) : 是 一 个 网 页 文件 , 它 将 一 个 窗口 通过 横向 或 纵向 的 方式 分 割 成 
多 个 框架 ,每 个 框架 中 要 显示 的 都 是 不 同 网 页 文件 。 不 同 的 网 页 文件 可 以 通过 超 链接 联 
系 起 来 。 如 图 1. 11 所 示 就 是 一 个 比较 经 典 的 框架 集 页 面 ,此 页 面 一 共 三 个 区 域 ,每 个 区 
域 分 别 显示 一 个 HTML 文档 ,由 于 框架 集 页 面 也 是 一 个 HTML 文档 ,所 以 一 共有 4 个 
HTML 文档 ,为 了 浏览 方便 , 当 浏 览 者 单 击 左 侧 导航 栏 中 的 服务 列表 超 链 接 时 , 右 侧 窗 
口 会 对 应 显示 详细 帮助 信息 。 


39 宝 E 您 好 ， 欢 迎 来 淘宝 ! 
e» 客户 中 心 


下 并且 在 想必 的 社区 尺 情 交流 您 的 网 上 由 物 经 
您 需要 先 注册 成 为 淘宝 的 会 员 ， 具 体 的 步骤 如 下 


图 1.11 框架 集 页 面 
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一 个 网 页 可 以 有 一 个 或 者 多 个 框架 。 框 架 的 一 些 用 法 如 下 。 

CD 在 页 面 的 一 个 固定 部 分 显示 LOGO 或 者 静态 信息 。 

(2) 左 侧 框架 显示 目录 , 右 侧 框架 显示 内 容 。 

(3) 框架 能 有 机 地 把 多 个 页 面 组 合 在 一 起 ,这 多 个 页 面 之 间 可 互相 独立 , 却 又 可 相互 


示例 1.10 


<HIML> 

« HEAD» 

<TITLE> rows cols 框架 </TITLE> 

< /HEAD> 

< FRAMESET rows- "25$ ,50% , * " border= "5" bordercolor- "# FF0000"> 
X FRAME name- "top" src-"the first.html"» 
< FRAME name= "middle" src- "the second.html"» 
< FRAME name- "bottom" src- "the third.html"» 


行 效果 如 图 1.12 所 示 。 


ipi 
d 


QrowscolEE - 世界 之 窗 3.6 XAD SEV 收藏 (B) IAD M F- 1x 


4°. ER >) (à) (B. ezez 


第 三 个 窗口 


(151-90, 596-381) 


图 1.12 水 平方 向 分 割 的 框架 


其 中 二 FRAMESET rows="25%,50%., * " border— "5" — rows 将 页 面 沿 水 平方 


向 分 割 成 几 个 窗口 ,也 可 以 取 多 个 值 ,是 由 逗号 分 割 的 像素 值 或 百分比 。 


<FRAME name- "top" src— "the first. html"> .src 是 指定 框架 窗口 的 源 文件 。 
示例 1. 11 是 将 页 面 进行 垂直 方向 分 割 。 
示例 1.11 


«HTML» 
<HEAD> 

« TITLE» rows cols 框架 </TITLE> 

< /HEAD> 

< FRAMESET cols- "120, * " border- "5" bordercolor= "# FF0000"» 
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«FRAME name- "top" src-"the first.html"» 
<FRAME name= "middle" src- "the second.html"» 
< /FRAMESET> 

< /HIML> 


运行 效果 如 图 1. 13 所 示 。 


@ rows coltER - 世界 之 二 36 ZAO EEV HRO IAD WE) 7 一 口 X 


P Oa AkO- Da] Berm a)" 


& & TR B. & € Q 10x - 
图 1.13 垂直 方向 分 割 的 框架 


下 面 来 实现 图 1. 11 这 个 稍微 复杂 的 框架 集 。 

经 分 析 , 首 先 将 页 面 分 割 为 上 下 两 部 分 ,上 部 分 的 高 度 占 浏览 器 高 度 的 30% 左 右 , 然 
后 将 下 面部 分 分 割 成 左右 两 部 分 ,宽度 大 约 占 窗口 的 20% 和 80%。 注 意 对 其 中 一 个 框 
架 窗 口 再 次 分 割 时 ,需要 使 用 frameset 标签 代替 frame 标签 。 下 面 一 步 步 实现 图 1. 11 
所 示 的 框架 集 页 面 。 

(D 创建 一 个 HTML 页 面 top. html, 如 图 1.14 所 示 。 


e 了 广告 页 - 世界 之 罕 3.6 文件 昌 查看 V) 收藏 B) IAD 帮助 F- OX 


ID. OFEA k le 3: [m sso aJ|* 


淘宝 网 ebas:sem 您 好 ， 欢 迎 来 淘宝 ! 
> 客户 中 心 


Fu & & FE li d €» Q 100€ - 


图 1.14 top. html 


代码 如 示例 1.12 所 示 。 
示例 1. 12 
<HIML> 


< HEAD» 
«TITLE» 顶部 广告 页 < /TITLE> 
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< /HEAD> 
<BODY> 


< P» « IMG src= "images/logo.gif" width= "250" height- "40" /> 您 好 ,欢迎 来 淘宝 !<BR/> 


< IMG src= "images/center.gif" width- "148" height- "39" /><BR/> 
< IMG src-"images/blue line.gif" width- "955" height- "18" /»« /P» 
< /BODY> 
< /HIML> 


(2) 创建 一 个 HTML 页 面 left. html, 如 图 1. 15 所 示 。 


左 树叶 航 页 面 - 世界 之 窗 3.6 XD SU HEE IAD WR F= -ox 


<r- ON D- lo DIEI B. saer 


EXER: 


注册 & 认 证 __ 
买 家 帮助 了 


H 


(arem o] 
个 人 资料 修改 


& 9 T& i. e Xp Q100%- 


Æ 1.15 left. html 


代码 如 示例 1.13 所 示 。 
示例 1. 13 


« HEAD» 

«META http- equiv- "Content- Type" content- "text/html; charset- gb2312" /> 

<TITLE> 左 侧 导航 页 面 </TITLE> 

< STYLE type="text/css"> 

xd-- 

body ( 
background- image: url (images/customer.jpg); 
background- repeat: no- repeat; 

H 

.STYLE7 (color: # 333333) 

--» 


< /STYLE» < /HEAD> 


«BODY» 

< P> &nbsp;« /P» 
«P» &nbsp;« /P» 
«P» &nbsp;« /P» 
«P» &nbsp;« /P» 
«P» &nbsp;« /P» 
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<P><A href- "right.html" target- "rightFrame"» 

< IMG src- "images/reg. jpg" width- "158" height- "31" border- "0" /»« /A» « /P» 
<P><A href- "buy.html" target- "rightFrame"» 

< IMG src- "images/buy.jpg" width- "160" height- "32" border- "0" /»« /A» « /P» 
<P><A href- "sale.html" target- "rightFrame"» 

< IMG src- "images/sale.jpg" width- "158" height- "31" border- "0" /»« /A» « /P» 
< P» « IMG src= "images/person.jpg" width- "157" height- "31" border- "0" /»« /P» 
< /BODY» 
« /HTML» 


在 代码 中 出 现 了 二 二 a href- "right. html" target— "rightframe" — . target 属性 指定 
了 所 链接 的 文件 出 现在 名 称 为 rightframe 的 框架 窗口 里 。 
target 目标 窗口 属性 一 共有 四 种 ,分别 如 下 : 
«a href-url target="_blank"> 显示 在 新 窗口 
' self"» 显示 在 本 窗口 
<a href=url target=" parent"> ”显示 在 父 窗口 
«a href-url target=" top"> 显示 在 整个 浏览 器 窗口 


(3) 创建 一 个 HTML 页 面 right. html, 如 图 1.16 所 示 。 


<a href-url targe: 


Qm swa - 世界 之 窗 3.6 文件 昌 FEV 收藏 B) IAD 帮助 H) F- 口 X 


4P., 4*9 ^-I»J(a-(B.sssz aj) >» 


知识 堂 首页 >》 注 册 && 认 证 


享受 淘宝 网 免费 网 上 交易 乐趣 ， 并 且 在 超人 气 的 社区 尽情 交流 您 的 网 上 购物 经 
验 ， 您 需要 先 注册 成 为 淘宝 的 会 员 ， 具 体 的 步骤 如 下 ， 


uranem 所 和 由 > | sanen > aurs) ameman 


& 9 T B a AA- 


1.16 right. html 


代码 如 示例 1. 14 所 示 。 
示例 1.14 


< FRAMESET rows- "20$ , * " frameborder- "no" border- "0" framespacing- "0"> 
< FRAME src- "top.html" name- "topFrame" scrolling- "No" noresize- "noresize" 
id- "topFrame" title- "topFrame" /> 
< FRAMESET cols- "20$, * " framespacing- "0" frameborder- "no" border- "0"> 
<FRAME src-"left.html" name= "leftFrame" scrolling- "No" noresize- "noresize"/^ 
«FRAME src-"right.html" name-"rightFrame" /> 


22 


4. iussis 


< /FRAMESET> 


行 效果 如 图 1. 17 所 示 。 


C sSREUE S2 Is 2O SEV SEG IAD We F -Ox 


4p.Q$4**í(^-I»a(Wmss a] 


ipi 
3 


Taobao. 
L-Edzp-— NN 
um PEZET D AMANE 


享受 淘宝 网 免费 网 上 交易 乐 起， 并且 在 超人 气 的 社区 尽情 交流 
FOLNE, SREAIUSHANSDRR, ARES 
LET 
(atmUR. MARP STI GAREA 确认 服务 协议 》 FRA 
注册 & 认 证 M 
| ; 
(151-90, 595-412) & Tu S e d x - 


图 1.17 Frame Sets. html 


1.4 CSS ŽRE 


通过 定义 CSS 样式 表 , 能 让 网 页 具有 美观 一 致 的 页 面 , 可 以 将 网 页 制作 得 更 加 绚丽 
多 彩 。 一 个 样式 文件 可 以 作用 于 多 个 页 面 ,具有 很 好 的 易 用 性 和 扩展 性 ,通过 修改 样式 
文件 ,能 制作 出 内 容 相同 的 、 外 观 不 同 多 姿 多 彩 的 页 面 。 此 外 ,使 用 CSS 能 有 效 分 离 网 页 
的 内 容 和 外 观 的 控制 ,从 而 便于 美工 与 程序 员 之 间 的 分 工 协作 ,发 挥 各 自 的 优势 。 

使 用 CSS 的 主要 原因 如 下 。 

(D HTML 标签 的 外 观 形式 比较 单一 ,HTML 对 网 页 格式 化 功能 的 不 足 , 比 如 段落 
间距 ,行距 等 的 控制 ,HTML 对 字体 变化 和 大 小 控制 不 好 ,HTML 对 页 面 格式 的 动态 更 
新 控制 不 好 ,HTML 排版 定位 能 力 差 。 

(2) 样式 表 的 作用 相当 于 华丽 的 衣服 。 同 样 的 内 容 , 采 用 不 同 的 CSS 样式 文件 ,就 
可 以 看 到 不 同 的 布局 和 效果 。 从 美工 角度 来 看 ,可 以 更 容易 调整 页 面 外 观 , 调 整 页 面 里 
的 某 个 文字 或 者 图 片 等 。 从 而 实现 复杂 多 变 的 页 面 效 果 , 因 此 CSS 相当 于 一 个 网 站 华丽 
的 衣服 。 如 图 1. 18 所 示 为 内 容 相 同 、 外 观 不 同 的 两 个 页 面 。 

(3) 样式 表 能 实现 内 容 与 样式 分 离 ,方便 团队 开发 ,如 图 1. 19 所 示 。 当 今 社会 竞争 
激烈 ,分 工 越 来 越 细 ,每 个 人 做 的 事情 越 来 越 单一 ,开发 网 站 也 不 例外 ,往往 需要 美工 和 
程序 设计 人 员 的 配合 ,美工 做 样式 ,程序 员 写 内 容 , 为 了 迎合 这 种 需要 ,就 出 现 了 样式 表 。 
样式 表 能 把 内 容 结构 和 格式 控制 相 分 离 , 使 网 页 可 以 仅 由 内 容 构成 ,而 将 所 有 的 网 页 格 
IÈ CSS 样式 文件 来 控制 ,从 而 方便 美工 和 程序 员 分 工 协作 、 各 尽 其 职 、 各 尽 其 能 ,为 开发 
出 优秀 的 网 站 提供 了 有 力 的 保障 。 

样式 表 由 样式 规则 组 成 ,这 些 规 则 告诉 浏览 器 如 何 显示 文档 ,一 个 样式 的 基本 语法 


由 三 部 分 组 成 ， 


<STYLE type="text/css"> 


图 1.18 内 容 相 同 、 外 观 不 同 的 两 个 页 面 


PAT new image will bring about the following brand effect. 
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ren Personal. ways something tresh 
deas try new has eth ivy end wendur expectation, 
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图 1.19 样式 表 能 实现 内 容 与 样式 分 离 


P {color:red; font- size:30px; font- family:# $ ;} 


< /STYLE> 


文档 样式 表 开始 类 型 为 CSS 样式 ,位 于 HTML 文件 ,中 间 为 样式 规则 ,最 后 为 声明 


文档 样式 表 结 束 。 


CSS 样式 表 是 一 组 规则 ,用 于 定义 文档 的 样式 。 例 如 ,可 以 创建 这 样 一 个 样式 规则 ， 


来 指定 所 有 二 P 二 标题 的 颜色 均 为 浅 绿 ,可 以 用 来 修饰 网 页 中 所 有 一 P 二 标签 的 样式 。 


规则 如 图 1. 20 所 示 。 


示例 1. 15 使 用 文档 样式 定义 了 页 面 中 所 有 一 P 二 标签 的 样式 。 


示例 1.15 


<HIML> 
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P (colbr:red; font-Size:30px; font-family: 338; 


1.20 CSS 样式 表 规 则 


< HEAD» 

<TITLE> 样 式 规则 < /TITLE> 

<STYLE type- "text/css"> 
P { color:red; font- family:" 隶 书 "; font- size:24px;] 

</STYLE> 

< /HEAD> 

<BODY> 

<H2> 静 夜 思 < /H2> 

<P> 床 前 明月 光 ,< /P> 

<P> 疑 是 地 上 和 霜 。< /P> 

<B> 举 头 望 明 月 ,< /P> 

<B> 低 头 思 故乡 。< /P> 

< /BODY> 

< /HTML» 


运行 结果 如 图 1. 21 所 示 。 


EEEO a| 
文人 SO :” dr 


床 前 明月 光 ， 
Rt E $8. 


举 头 望 明月 ， 


低头 思 故 乡 。 Bi 


1.21 文档 样式 效果 


在 示例 1. 15 P In LE H2 bs E BU FEX 55 — Po br 4 BU FE SK — BE — FE - JE n s] 
实现 ?要 为 它们 定义 一 个 共享 样式 ,这 个 共享 样式 可 以 使 用 类 样式 来 实现 。 
类 样式 如 下 : 


«STYLE type= "text/css"> 
.red ( 
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color:red; font- family:" 隶 书 "; font- size:24px; 
} 


< /STYLE» 


Hp“, red "为 类 名 ,注意 类 名 前 有 个 “.”, 类 名 可 以 随意 命名 ,最 好 根据 元 素 的 用 途 
来 定义 一 个 有 意义 的 名 称 。 某 个 标签 希望 采用 该 类 选择 器 的 样式 ,就 可 以 直接 引用 即 
可 。 如 示例 代码 1. 16 所 示 。 

示例 1. 16 


<HIML> 
«HEAD» 
<TITLE> 样 式 规则 < /TITLE> 
< STYLE type="text/css"> 
.red ( color:red; font- family:"j B ";) 
< /STYLE» 
< /HEAD> 
<BODY> 
<H2 classe "red"> jf} PUU < /H2> 
<P class= "red"> 床 前 明月 光 ,</P> 
«P class= "red"> 疑 是 地 上 和 霜 。</P> 
<P > 举 头 望 明月 ,< /P> 
«P class= "red"> 低 头 思 故乡 。</P> 
< /BODY> 
< /HTML> 


运行 结果 如 图 1. 22 所 示 。 


O 样式 规则 - 世界 之 瘟 3.6 文件 上 日” 坦 看 收藏 (B) IAD 帮助 (H) F- 0X 
-02a Ak D-le a) a] 

+ o 

静夜 思 

床 前 明月 光 ， 


BAERS 


& $ F& i SG A100% - 


图 1.22 文档 样式 效果 


示例 1.17 采用 了 文档 样式 和 类 样式 ,其 中 样式 规则 使 用 了 文本 属性 ,从 而 有 效 地 控 
制 了 网 页 中 的 文本 效果 。 
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示例 1.17 


<HTML> 
<HEAD> 
<META http- equiv- "Content- Type" content= "text/html; charset= gb2312"> 
<TITLE> 文 本 属性 样式 < /TITLE> 
<STYLE type="text/css"> 
P 
{ font-size: 12px; 
font- family: "宋体 "; 
text-align:left; 


) 
/* 大 字体 的 样式 * / 
-bigFont 
{ font-size: 16px; 
color:red; } 
< /STYLE> 
< /HEAD> 
<BODY> 
【新 闻 J[ 设 搜狐 为 首页 ] 9 月 1H 
«p class= "bigFont">。 世 锦 赛 刘翔 12 秒 95 夺冠 成 就 大 满 贯 < /p> 
P 我 国 实 施 不 安全 食品 召回 制度 遏制 非法 出 口 < /p> 
p» * 中 国 代表 向 联合 国 通报 军备 透明 制度 举措 < /p> 
«p class-"bigFont"» « [EAE | 刘翔 : 最 后 胜利 的 感觉 真 好 ! < /p> 
< /BoDY» 
< /HTML» 


在 示例 中 ,第 一 个 段落 过 p 之 和 第 四 个 段落 二 p> 都 应 用 了 标签 样式 二 p 之 和 类 样式 


bigFont, 到 底 哪 个 样式 起 作用 呢 ? 就 近 原则 , 当 有 不 同 的 样式 规则 应 用 在 同一 标签 上 时 ， 


根据 这 些 样式 规则 距离 修饰 的 文本 的 远近 ,来 决定 应 用 哪 一 个 样式 规则 ,如 示例 中 第 一 
个 段落 二 p 二 和 第 四 个 段落 二 p 二 起 作用 的 应 该 是 类 样式 bigFont。 运 行 结果 如 图 1. 23 
所 示 。 


【新 闻 】[ 设 搜狐 为 首页 ] 9 月 1 日 | 
- 世锦 赛 刘 翔 12 秒 95 夺 冠 成 就 大 满 贯 | 
“我 国 实施 不 安全 食品 召回 制度 XESHERUED | 


“中国 代表 向 联 合 国 通报 军备 透明 制度 学 措 
“博客 | 刘翔 ， 最 后 胜利 的 感觉 真 好 ! | 


& $ TE e Qr ix - 
图 1.23 文本 属性 效果 
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恰当 使 用 背景 ,可 以 使 页 面 既 美 观 显示 速度 又 快 。 背 景 包括 背景 颜色 .背景 图 像 以 
及 背景 图 像 以 何 种 方式 平 铺 在 指定 区 域内 。 

下 面 是 常用 的 背景 属性 。 

(1) background-color: 设置 背景 颜色 。 

(2) background-image: 设置 背景 图 像 。 

(3) background-repeat: 设置 一 个 指定 的 图 像 如 何 被 重复 ,可 取 值 repeat-x, repeat, 
no-repeat repeat-y, 

示例 1. 18 对 一 个 表 设 置 了 背景 图 像 ,并 且 背 景 图 像 不 平 铺 。 

示例 1. 18 


<HTML> 

< HEAD> 

<META http- equiv- "Content- Type" content= "text/html; charset= gb2312" /> 
« TITLE» Ë I 2 H < /TITLE> 

< STYLE type="text/css"> 


/* 表格 单元 格 小 字体 的 样式 * / 
TD 
t 
font- size: l4px; 
font- family: "宋体 "; 
padding- left:10px; 


) 
/* 大 字体 的 样式 * / 
-bigFont 
t 
font-size: 16px; 
color: #0000FF; 


/* 表格 虚线 边框 的 样式 * / 
.tableBorder 
border- right- width: 2px; 
border- right- style: dashed; 


/< 设置 无 下 划 线 的 超 链接 样式 * / 
A( 
color: blue; 
text-decoration: none; 


} 
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A:hover( / * BU TE RE BEBE LEF EKA E 7 
color: red; 


} 


/* 设 置 表格 的 背景 图 片 样式 * / 

table 

{ 
background- image: url(images/type back.jpg); 
background- repeat :no- repeat; 

) 

< /STYLE» 

< /HEAD> 


<BODY> 
< P» « IMG src- "images/logo.gif" width= "250" height- "40" /> 您 好 ,欢迎 来 淘宝 !< /P> 
< P» &nbsp;« /P» 
< TABLE width= "92$" > 
<TR> 
« TD width= "26$ "> gnbsp;< /TD> 
« TD width= "36$ "> &nbsp;< /TD> 
« TD width= "29% "> gnbsp;< /TD> 
<TD width= "9$ "> gnbsp;< /TD> 
</TR> 
<TR> 
< TD» &nbsp;< /TD> 
« TD» gnbsp;< /TD> 
« TD» &nbsp; < /TD> 
< TD» &nbsp;« /TD> 
</TR> 
«TR 
<TD class- "tableBorder"» «A href- "£ " class- "bigFont"> 手 机 充值 .IP 卡 /电话 卡 </aA>< 
BR/» 
«A href="#"> f$ 5J</A> | «A href- "& "^ Gli « /A> | «A href= " "> ili « /A» «A href= 
"d ">< /A>< /TD> 
« TD class- "tableBorder"» «A href- "£ " class- "bigFont"> 网 游 , 点 卡 、 金 币 « /a» 
<BR/> 
<A href="#"> (E3&« /A» | <A href="#"> JE $< /A> | <A href="#"> H Z) Az ft « /A>< /TD> 
<TD colspan- "2" class="tablePad"><A href- "# " class- "bigFont"> 电 子 彩票 
</A><BR/> 
<A href- "4 "^ di « /A> | «A href- "$ "» fK E< /A> | <A href="#"> IE « /A>< /TD> 
</TR> 
< TR bgcolor= "# EBEFFF"> 
« TD class= "tableBorder"» «A href="#" class- "bigFont"> 手 机 (诺基亚 MOTO) 
</A><BR/> 
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«A href- "$ "» N73« /A> | «A href- "£ "» N72« /A> | «A href- "# ">N95< /A>< /TD» 
<TD class- "tableBorder"» «A href- "£" class- "bigFont"> 电 脑 硬件 、 网 络 设备 
« /A» « BR/» 
<A href- "i "» CPU< /A> | «A href="#"> 主 板 </A> | «A href="#"> F< /A» | «A href= 
> 硬盘 < /A>< /TD> 
« TD colspan- "2" class= "tablePad"» «A href="#" class- "bigFont"> 数 码 相 机 
</A><BR/> 
«A href- "$ "2 2 JÉ« /A> | <A href="#"> 佳 能 < /A> | «A href="#"> = Æ< /A>< /TD> 
</TR> 
< TR bgcolor= "# EBEFFF"> 
<TD class= "tableBorder"><A href="#" class- "bigFont"> 笔 记 本 电脑 </A><BR/> 
<A href="#"> IBM< /A> | «A href= "# "> 惠普 < /R> | <A href="#"> DELL< /A>< /TD> 
« TD class= "tableBorder"> «A href- "£ " class= "bigFont"> 办 公设 备 .耗材 </a> 
<BR/> 
«A href= " "» 1T ÉD EL« /A» | <A href= "#"> 电 子 酬 典 < /A> | <A href- "$ "> Bb f </A><A href 
="#"></A>< /TD> 
<TD colspan- "2" class- "tablePad"» «A href- "# " class- "bigFont"» MP3,MP4« /A> 
«BR/» 
«A href- "$ "> 魅族 < /R> | <A href- "& "» Z1 8 « /A» | «A href="#"> ZJE </A><A href="#" 
></RA>< /TD> 
</TR> 
< /TABLE> 
< P> &nbsp;« /P> 
«P» &nbsp;« /P> 
< /BODY> 
< /HIML> 


运行 效果 图 如 图 1. 24 所 示 。 


淘宝 网 人 P3959" NM 


TUR. PRA ; 网游、 点 卡 、 eg ETUR 

移动 | 联通 | 铁通 征途 | ES | 自动 发 货 福彩 | 体彩 | 足彩 
手机 (洋基 亚 MOTO ) 电脑 硬件 、 网 络 设备 数码 相机 
N73 | N72 | N95 ceu | 主板 | 内 存 | 硬盘 索尼 | 佳能 | 三 星 
笔记 本 电脑 办 人 设备 、 HH IP3、 WP4 


& 4 T B d ORo- 
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方 框 属性 就 是 对 应 CSS 盒子 模型 ,CSS 盒子 模型 都 具备 方 框 属性 。 常 用 的 方 框 属性 


30 Ms 


有 边界 (margin) .边框 (border) ,填充 (padding) 、 内 容 。 
这 些 属性 都 可 以 与 现实 生活 中 的 盒子 对 应 起 来 。 参 见 图 1. 25, 这 里 图 示 了 一 些 常 用 


的 方 框 属性 。 
margin-top ~ 
ED euas 
Lo wan S 


margin 


margin-left 


左边 界 


padding-left 
左 填充 


margin-bottom 


图 1.25 JERE 


常用 的 方 框 属性 如 表 1. 1 所 示 。 
表 1.1 常用 的 方 框 属性 


属 性 CSS 名 称 说 明 
margin-top 设置 对 象 的 上 边 距 
margin-right 设置 对 象 的 右边 距 

边界 属性 
margin-bottom 设置 对 象 的 下 边 距 
margin-left 设置 对 象 的 左边 距 
border-style 设置 边框 的 样式 

边框 属性 border-width 设置 边框 的 宽度 
border-color 设置 边框 的 颜色 
padding-top 设置 内 容 与 上 边框 之 间 的 距离 
padding-right 设置 内 容 与 右边 框 之 间 的 距离 

填充 属性 - 
padding-bottom 设置 内 容 与 下 边框 之 间 的 距离 
padding-left 设置 内 容 与 左边 框 之 间 的 距离 


示例 1. 19 就 是 方 框 属性 的 应 用 实例 。 
示例 1. 19 


<HIML> 
< HEAD» 

«META http- equiv- "Content- Type" content- "text/html; charset= gb2312"> 
<TITLE> 表 格 虚线 框 的 样式 < /TITLE> 


SW 
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«STYLE type="text/css"> 

-tableBorder 

{ 
border- right- width: 3px; 
border- right- color:red; 
border- right- style:dashed; 
padding- top:20px; 
padding- left:10px; 

} 

TR{ 

background: yellow; 

) 

< /STYLE» 

« /HEAD» 


« BODY» 
< TABLE border= "0"> 
<TR> 
« TD class= "tableBorder"> 手 机 充值 < /TD> 
« TD class- "tableBorder"> 电 子 彩票 </TD> 
</TR> 
<TR> 
« TD class= "tableBorder"> 计 算 机 硬件 < /TD> 
<TD class= "tableBorder"> 数 码 相 机 < /TD> 
</TR> 
< /TABLE> 
< /BODY> 
< /HTML> 


运行 效果 见 图 1.26 所 示 。 


手机 充值 电子 彩票 
计算 机 硬件 ， 数 码 相机 ， 


(151-90, 550-320) CEAT T 4o Q 100€ - 


图 1.26 虚线 框 样式 


示例 1. 20 显示 的 是 细 边 框 样式 。 
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示例 1.20 


«HTML» 
« HEAD» 
<TITIE> 细 边框 的 文本 框 < /TITLE> 
< /HEAD> 
< STYLE type="text/css"> 
.textBorder( 
border- width:lpx; 
border- style:solid; 
) 
< /STYLE» 
«BODY» 
< FORM name= "forml" method= "post" action- ""» 
«PRA: 
< INPUT name- "fname" type- "text" class- "textBorder" > 
</P> 
<P> 密 码 : 
< INPUT name= "pass" type="password" class- "textBorder" size= "21"> 
</P> 


运行 效果 如 图 1.27 所 示 。 


OMENS- ”文件 日 SEV 收藏 (B) IAD WE F -Ox 


IP. OZAR i) la [B sex aj» 
* LL E 


& 9 FE i & Q» Q 100€ - 
图 1.27 细 边 框 样式 


除了 以 上 一 些 常 用 的 样式 之 外 ,CSS 样式 表 还 提供 了 一 种 特殊 的 样式 ,就 是 指定 某 
个 标签 的 个 别 属性 样式 ,这 些 样 式 中 最 常用 的 就 是 CSS 控制 超 链接 样式 。 


a:link {color: #FF0000} /* 未 被 访问 的 链接 ,红色 * / 
a:visited (color: #00FF00} /* 已 被 访问 过 的 链接 ,绿色 * / 
a:hover (color: #FFCC00} /* 鼠标 悬浮 在 上 的 链接 ,橙色 * / 
a:active (color: #0000FF} /* 鼠标 点 中 激活 链接 , 蓝 色 * / 


示例 1.21 


<HIML> 
<HEAD> 
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«META http- equiv- "Content- Type" content- "text/html; charset= gb2312"> 

<TITLE> 文 本 样式 < /TITLE> 

«STYLE type="text/css"> 
A{ /* 设置 无 下 划 线 的 超 链接 样式 * / 


color: blue; 


text- decoration: none; 


H 


A:hover( /* BUb TE RE BEBE bE 2E DU (9 LOS, * / 


color: red; 
} 

< /STYLE» 

< /HEAD> 

< BODY» 


< TABLE width- "300" border- "1"> 


<TR> 


« TD width="150"> 手 机 < /TD> 
<TD width="150"> 计 算 机 < /TD> 


</TR> 
<TR> 


«TD» «A href="#"> ifi AE WE </A> | <Rhref= " "2 BETCU fir « /A>< /TD> 
«TD» «A href- "$ "> 联想 < /A» | «A href= "4 "> 戴尔 < /A» < /TD> 


</TR> 
< /TABLE> 
< /BODY> 
« /HTML» 


运行 效果 如 图 1.28 所 示 。 


计算 机 


| 摩托 罗拉 


联想 | 戴尔 


CEAT a qo Q 1006 - | 


1.28 超 链 接 样式 
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下 面 来 实现 图 1. 29 所 示 的 效果 。 


(HUE -世界 之 ”文件 昌 SEV &xB) IAD SR) - — 口 X 
ID. OTEA ie) la) [加 .sa aj)» 
= 
LLL 
会 员 名 : 
密 B: 
(ROO) CA 
还 没 注册 。 ”注册 帮助 
E & &TE B d € Q0 - | 


图 1.29 综合 示例 


示例 1.22 


<HIML> 

< HEAD» 

«META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
«TITLE» FE C42] 2< /TITLE> 

< /HEAD> 

< STYLE type="text/css"> 


/* 细 边 框 的 文本 输入 框 * / 
.textBaroder 
t 
border- width:lpx; 
border- style:solid 


AC /* 设 置 无 下 划 线 的 超 链接 样式 */ 
color: blue; 
text- decoration: none; 
} 
A:hover( /* 鼠标 在 超 链 接 上 悬 停 时 显示 的 颜色 * / 
color: red; 
text- decoration:underline 
} 
< /STYLE> 


<BODY> 
< TABLE width=222 border-0 align="center"> 
< TBODY» 
«TR align=left> 
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<TD colspan= "2">< IMG src= "image/title login 2.gif" width- "150" height= 
"57" « TES 
</TR> 
<TR align=left> 
<TD width= "77"> 会 员 名 :< /TD> 
<TD width= "150">< INPUT class-textBaroder id= txtName size- 15 
name= txtName> </TD> 
</TR> 
<TR align=left> 
<TD> 密 gnbsp; &nbsp; 码 :< /TD> 
<TD>< INPUT class= textBaroder id=txtPass type=password 
size-15 name= txtPass> </TD> 
« /TR» 
<TR> 
« TD align=center> « INPUT name=Button type- "submit" value=" 登 录 "></TD> 
« TD align=center>< INPUT name=Button type= "reset" value=" 取 ijj "></TD> 
</TR> 
<TR> 
<TD align=center><A href=" # "> 还 没 注 册 < /A>< /TD> 
<TD align= center><A href="# "> 注册 帮助 </A>< /TD> 
</TR> 


< /TBODY> 


< /TABLE> 
< /BODY> 
< /HTML> 


写 好 样式 表 之 后 ,其 实 有 3 类 应 用 方式 ,不 同 的 应 用 方式 只 是 应 用 范围 不 同 , 应 用 效 
果 相 同 。 内 嵌 样 式 表 只 对 某 张 网 页 起 作用 ,如 果 希 望 某 张 网 页 中 的 部 分 内 容 与 众 不 同 ， 
那么 就 得 采用 行内 样式 ,如 果 让 网 站 中 所 有 的 网 页 都 拥有 一 致 性 的 风格 ,就 必须 使 用 外 
部 样式 表 文 件 。 可 以 这 么 说 ,行内 样式 是 写 在 标签 里 面 的 ,只 对 所 在 标签 有 效 。 内 部 样 
式 表 是 写 在 二 HEAD> 王 /HEAD>> 里 面 的 ,只 对 所 在 的 网 页 有 效 。 外 部 样式 表 文 件 是 
以 一 个 ess 为 后 缀 的 ess 文件 ,这 个 样式 文件 可 以 被 多 个 网 页 引用 ,从 而 保证 多 个 网 页 具 


有 统一 的 风格 。 
内 部 样式 表 是 写 在 二 HEAD 二 /HEAD 才 里 面 的 ,如 示例 1.23 所 示 。 
示例 1.23 


<HTML> 


< HEAD> 
«TITLE» V E PÉIR K< /TITLE> 
< STYLE type="text/css"> 


P{ 


font- family:'sk B"; 
font- size:18px; 
color:# FF0000; 


Ms 


text-align:left; 

} 

< /STYLE> 

< /HEAD> 

«BODY» 
<H2> 静 夜 思 < /H2> 
<H3> 作 者 : 李白 < /H3> 
<P> 床 前 明月 光 ,< /P> 
<P> 疑 是 地 上 和 霜 。< /P> 
<P> 举 头 望 明月 ,< /P> 
<P> 低 头 思 故乡 。< /P> 
< /BODY> 

< /HTML> 


运行 效果 如 图 1.30 所 示 。 


D siesta 


作者 : 李白 
床 前 明月 光 ， 
SEES ER. 


举 头 望 明月 ， zi 
& eTe E aA Q 1005 - 


图 1.30 ARËRAR 


行内 样式 使 用 元 素 标 签 的 style 属性 定义 ,如 示例 1. 24 所 示 。 
示例 1.24 


<HTML> 

X HEAD» 

<TITLE> 设 置 属性 < /TITLE> 

< /HEAD> 

<BODY> 

«P style - "color:red;font- size:30px; font- family: 隶 书 ;"> 
这 个 段落 应 用 了 样式 

«P» 

这 个 段落 按 默认 样式 显示 

< /BODY> 


运行 效果 如 图 1. 31 所 示 。 
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C 设置 屋 性 - 世界 之 窗 -。 X6 SEV dB) IAD 帮助 H) F= -Ox 

ID. OZA Ak »/2-|[B ss a) >» 
— Q 

这 个 段落 应 用 了 样式 i 

这 个 段落 按 默 认 样式 显示 

完成 T E EEE T TE 


图 1.31 行内 样式 效果 (一 ) 


示例 1.25 


<HIML> 
« HEAD» 
<TITLE> 行 内 样式 表 < /TITLE> 
< /HEAD> 
<BODY style=" background- color:#CCCCCC"> 
<P><IMG src- "libai.jpg" width= "140" height- "170" align= "left"» « /P> 
<H2> 静 夜 思 < /H2> 
<H3> 作 者 : 李白 < /H3> 
«P style= "color:# FF0000; font- size:18px; font- family: 隶 书 ; border- bottom- style:dashed 
"> 床 前 明月 光 ,<BR> 
疑 是 地 上 和 霜 。<BR> 
举 头 望 明月 ,<BR> 
低头 思 故 乡 。< /P> 
<P> 注 释 : 
静夜 思 : 宁静 的 夜晚 所 引起 的 乡 思 。 
疑 : 怀疑 ,以 为 。 
举 : 抬 . 仰 。</P> 
< /BODY> 
< /HIML> 


运行 效果 如 图 1. 32 所 示 。 

如 果 和 希望 多 个 页 面 甚至 整个 网 站 所 有 页 面 都 采用 统一 风格 ,就 像 军 人 、 医 生 等 专业 
人 士 都 穿 上 统一 的 服装 , 干 不 同 的 活 。 可 以 把 这 些 样 式 从 标签 中 提取 出 来 , 放 在 一 个 单 
独 的 文件 中 ,然后 和 每 个 网 页 关联 上 。 这 就 是 外 部 样式 表 。 

示例 1. 26 是 创建 外 部 样式 表 文 件 , 命 名 为 newstyle. css。 

示例 1.26 

PX 

/* 设置 段落 <P> 的 样式 : 字体 和 背景 色 * / 
font- family: System; 


O AARRE - 世界 之 窗 3.6 XD 查看 VW 收藏 B) IAD WE) - 一 口 X 


ID- OZA k (ne-[»] a- [B are ae 


图 1.32 行内 样式 效果 (二 ) 


font- size: 18px7 

color: $FF00CC; 

) 

H2 { 

/* 设置 <H2> 的 样式 : 背景 色 和 对 齐 方式 * / 

background- color: # CCFF33; 

text-align: center; 

) 

A{ ”/* 设 置 超 链接 不 带 下 划 线 ,text-decoration 表示 文本 修饰 x / 
color: blue; 

text- decoration: none; 

3 

A:hover { — /* 鼠标 在 超 链接 上 悬 停 , 带 下 划 线 */ 
color: red; 
text- decoration:underline; 

} 


把 样式 文件 和 网 页 绑 定 。 假 定 某 个 网 站 中 的 Link_Outcssl. html 网 页 和 Link | 
Outcss2. html 网 页 都 要 引用 newstyle. css. 引 用 方式 如 下 。 

Link_Outess1. html 见 示 例 代码 1. 27。 

示例 1.27 


<HIML> 

«HEAD» 

<TITLE> 链 接 外 部 样式 < /TITLE> 

«LINK href= "newsyle.css" rel="stylesheet" type="text/css"> 
< /HEAD> 

«BODY» 


<P><IMG src- "libai.jpg" width= "140" height- "170" align- "left"></P> 
«m» if «8» 
«H3» «A href- "4 "> 作者 : 李白 </a></H3> 
<P> 床 前 明月 光 ,<BR> 
疑 是 地 上 霜 。<BR> 
举 头 望 明 月 ,<BR> 
ERES, </P> 
<P> 注 释 : 
静夜 思 : 宁静 的 夜晚 所 引起 的 乡 思 。 
疑 : 怀疑 ,以 为 。 
举 : 抬 , 仰 。</P> 
< /BODY» 
< /HTML» 


Link_Outcss2. html 见 示例 代码 1. 28. 
示例 1. 28 


<HTML> 
«X HEAD» 
<TITLE> 链 接 外 部 样式 < /TITLE> 
X LINK href= "newsyle.css" rel="stylesheet" type="text/css"> 
< /HEAD> 
<BODY> 
<P><IMG src= "dufu.jpg" width= "140" height- "170" align= "left"» « /P» 
«H2» TE HI « /H2> 
«H3» «A href="#"> (E34 : 杜甫 < /A></H3> 
<P> 国 破 山河 在 ,<BR> 
城 春 草木 深 。<BR> 
感 时 花 溅 泪 ,<BR> 
人 恨 别 鸟 惊 心 。< /P> 
<P> 注 释 : 


这 四 句 诗 ,都 体现 在 * 望 "' 字 中 。 诗 人 俯仰 瞻 视 ,视线 由 近 而 远 , 又 由 远 而 近 , 视 野 从 城 到 山河 ,再 由 


满 城 到 花鸟 。< /P> 
< /BODY> 
< /HTML» 


1.5 3 A y f 


1. HTML 语言 中 的 预 格式 文本 标签 是 ( Ja 

A. <body> B. <nobr> C. <pre> D. <p> 
2. CSS 样式 表 根 据 所 在 网 页 的 位 置 ,可 分 为 ( Jis 

A. 行内 样式 表 、 内 嵌 样 式 表 、 混 合 样式 表 

B. 行内 样式 表 、 内 骨 样 式 表 、 外 部 样式 表 
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C. Jb ABEESR RE ARERR FARK 
D. 外 部 样式 表 、 混 合 样式 表 、 导 入 样式 表 
3. 在 插入 图 片 标签 中 ,对 插入 的 图 片 进行 文字 说 明 使 用 的 属性 是 ( js 


A. name B. id C. src D. alt 
4. 对 于 二 FORM action— "URL" method= * 二 标签 ,其 中 * 代表 GET XC Js 
A. SET B. PUT C. POST D. INPUT 
5. 下 列 标签 可 以 不 成 对 出 现 的 是 ( Ju 
A. <HTML></HTML> B. «P- «P 
C. «TITLE-— «/TITLE-— D. <BODY></BODY> 
6. 对 于 标签 二 input type= * 二 ,如 果 和 希望 实现 密码 框 效果 , * 值 是 ( Jis 
A. hidden B. text C. password D. submit 
7. HTML fV 13 — select name= "name" — </select> KIR C Jis 
A. 创建 表格 B. 创建 一 个 滚动 菜单 
C. 设置 每 个 表单 项 的 内 容 D. 创建 一 个 下 拉 菜 单 
8. BODY 元 素 用 于 背景 颜色 的 属性 是 ( Jo 
A. alink B. vlink C. bgcolor D. background 


9. 在 表单 中 包含 性 别 选 项 , 且 默 认 状 态 为 " 男 ” 被 选中 ,下 列 正确 的 是 ( Ja 
A. <input type=radio name=sex checked> 男 
B. <input type=radio name= sex enabled> Jj 
C. <input type=checkbox name= sex checked 9j 
D. <input type— checkbox name-— sex enabled 9j 
10. TE CSS 中 ,下 面 ( ) 方 法 表示 超 链接 文字 在 鼠标 经 过 时 , 超 链接 文字 无 下 
划 线 。 
A. A:link{TEXT-DECORATION: underline } 
B. A:hover { TEXT-DECORATION: none} 
C. Al:active (TEXT-DECORA TION: blink } 
D. A:visited ( TEXT-DECORA TION: overline } 
1l. 一 个 有 3 个 框架 的 Web 页 实际 上 有 ( DAIMA HTML 文件 。 
A. 2 B. 3 C. 4 D. 5 
12. <img src— "name" align="left"> fj zx 8 J& ( J 
A. 图 像 相 对 于 周围 的 文本 左 对 齐 B. 图 像 相 对 于 周围 的 文本 右 对 齐 
C. 图 像 相 对 于 周围 的 文本 底部 对 齐 “”D. 图 像 相 对 于 周围 的 文本 顶部 对 齐 
13. html 语言 中 ,设置 表格 单元 格 的 水 平 对 齐 的 标记 是 ( m 


A. <td align=? > B. <td valign=? > 
C. <td text-align= # > D. <td text-valign= # > 

yE E ) 属 性 指定 将 用 以 下 三 种 方法 中 的 一 种 来 显示 字体 : 正常 .斜体 和 偏 斜 体 。 
A. Font Style B. Font Family 


C. Line Height D. Font Designer sight 


z^ 
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15. 请 完成 如 图 1.33 所 示 的 案例 。 


COD 表单 文本 框 用 CSS 设置 细 边 框 样式 ,边框 颜色 : #61B16A。 
(2)“ 提 交 ” 按 钮 设置 成 图 片 按钮 。 


: 
| 
t 
g 


第 2 ut 


JavaScript 


2.] 基本 入 法 


最 初 开发 HTML 时 ,是 要 将 它 用 做 一 种 在 Internet. 上 传输 数据 的 文档 格式 。 但 是 ， 
焦点 很 快 便 从 学 术 和 科学 领域 转移 到 普通 用 户 领域 ,用 户 将 浏览 Internet 作为 一 种 信息 
来 源 和 娱乐 方式 。 为 了 吸引 普通 用 户 ,虽然 网 页 变 得 更 富 创新 ,也 更 加 丰富 多 彩 ,但 在 网 
页 显示 之 后 ,用 户 对 网 页 没有 或 只 有 极 少 的 控制 权 。 

作为 上 述 问 题 的 一 种 解决 方案 ,人 们 开发 出 了 JavaScript, 使 用 它 可 以 创建 动态 效果 
的 .人 机 互 交 的 Internet 网 页 。 对 于 HTML 开发 人 员 来 说 ,JavaScript 有 助 于 构建 与 用 
户 交互 的 HTML 系统 。 

JavaScript 旨 在 使 网 页 开发 人 员 能 对 网 页 的 功能 进行 管理 和 控制 。JavaScript 代码 
可 以 嵌入 到 HTML 文档 中 ,控制 页 面 的 内 容 和 验证 用 户 输入 的 数据 。 当 页 面 显 示 在 浏 
览 器 中 时 ,浏览 器 将 解释 并 执行 JavaScript 语句 。JavaScript 的 功能 十 分 强大 ,可 实现 多 
种 任务 ,如 执行 计算 .检查 表单 .编写 游戏 添加 特殊 效果 、 自 定义 图 形 选择 、 创 建安 全 密 
码 等 ,所 有 这 些 功能 都 有 助 于 增强 站 点 的 动态 效果 和 交互 性 。 

学 习 JavaScript. 主要 基于 以 下 两 点 原因 。 


1. 表单 验证 


通过 使 用 JavaScript, 可 以 创建 动态 的 HTML 页 面 ,以便 用 特殊 对 象 .文件 和 相关 数 
据 库 来 处 理 用 户 输入 和 维护 永久 性 数据 。 正 如 大 家 都 知道 的 ,在 向 某 个 网 站 注册 时 , 必 
须 填 写 一 份 表单 ,输入 各 种 详细 信息 。 如 果 某 个 字段 输入 有 误 ,在 向 Web 服务 器 提交 表 
单 前 ,经 客户 端 验证 发 现 错误 ,屏幕 上 就 会 弹出 警告 消息 。 这 可 以 通过 编写 代码 来 实现 。 
代码 将 用 于 在 将 用 户 输入 的 数据 提交 到 Web 服务 器 进行 处 理 之 前 验证 数据 ,从 而 减轻 
服务 器 的 负担 ,提高 服务 器 的 运行 效率 。 


2. 页 面 动 态 效 果 


在 JavaScript 中 ,可 以 编写 响应 鼠标 单 击 等 事件 的 代码 ,创建 动态 HTML 页 面 ,从 
而 高 效 地 控制 页 面 的 内 容 。 
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JavaScript 既是 一 种 描述 语言 ,也 是 一 种 基于 对 象 (Object) 和 事件 驱动 (EventDriven)， 
并 具有 安全 性 能 的 脚本 语言 。 使 用 它 的 目的 是 与 HTML 超 文本 标记 性 语言 一 起 实现 在 
一 个 Web 页 面 中 连接 多 个 对 象 ,与 Web 客户 实现 交互 。 无 论 是 在 客户 端 还 是 在 服务 器 
端 ,JavaScript 应 用 程序 都 要 下 载 到 浏览 器 的 客户 端 执 行 ,从 而 减轻 服务 器 端的 负担 。 

通常 ,JavaScript fJ JH — SCRIPT fiie ik A. HTML 文档 中 的 。 可 以 将 多 个 脚 
本 嵌入 到 一 个 文档 中 ,只 需要 将 每 个 脚本 都 封装 在 王 SCRIPT 二 标记 中 即 可 。 浏 览 器 在 
遇 到 二 SCRIPT 二 标记 时 ,将 逐 行 读 取 内 容 , 直 到 遇 到 二 /SCRIPT 二 结束 标记 为 止 。 然 后 
浏览 器 将 检查 JavaScript 语句 的 语法 ,如 果 有 任何 错误 ,就 会 在 警告 框 中 显示 ;如 果 没 有 
错误 ,浏览 器 将 编译 并 执行 语句 。 

脚本 的 基本 结构 如 下 : 


< SCRIPT language- "JavaScript"> 
«1-- 

JavaScript 语句 ; 

--> 


< /SCRIPT> 


language 属性 用 于 指定 编写 脚本 使 用 哪 一 种 脚本 语言 ,脚本 语言 是 浏览 器 用 于 解释 
脚本 的 语言 ,通过 该 属性 还 可 以 指定 使 用 的 脚本 语言 的 版 本 。 
<l- 语句 -二 是 注释 标记 。 这 些 标记 用 于 告知 不 支持 JavaScript 的 浏览 器 忽略 标 
记 中 包含 的 语句 。 所 !-- 表 示 开 始 注释 标记 ,而 -之 则 表示 结束 注释 标记 。 这 些 标记 是 可 
选 的 ,但 最 好 在 脚本 中 使 用 这 些 标记 。 目 前 大 多 数 浏览 器 支持 JavaScript, 但 使 用 注释 标 
记 可 以 确保 不 支持 JavaScript 的 浏览 器 会 忽略 戏 入 到 HTML 文档 中 的 JavaScript 语句 。 
学 习 JavaScript 与 学 习 其 他 编程 语言 的 方法 一 样 , 都 需要 靠 自己 多 看 相关 的 书籍 、 多 
观摩 别人 的 程序 、 多 写 代码 ,多 实践 。 所 以 后 面 的 每 一 个 范例 ,建议 读者 在 弄 懂 的 基础 上 
亲自 动手 编写 。 要 编写 JavaScript 程序 ,一般 按 如 下 三 步 进行 。 
第 一 步 : 可 以 利用 任何 编辑 器 (如 Dreamweaver, UltraEdit, Editplus 等 ) 来 创建 
HTML 文档 。 
第 二 步 ; 在 Web 页 面 内 加 入 JavaScript 代码 ,JavaScript BUT t A YE HTML 文档 中 
的 二 SCRIPT Language- "JavaScript" > </SCRIPT> fr iu zc H]. 
第 三 步 : 将 HTML 文档 保存 为 扩展 名 是 html 或 htm 的 文件 ,然后 使 用 浏览 器 就 可 
以 看 到 JavaScript 程序 运行 的 效果 。 
可 以 按照 上 面 的 步骤 来 编写 示例 2. 1, 在 示例 中 演示 JavaScript 程序 。 
示例 2.1 
«HIML- 
«X HEAD» 
<TITLE> 脚 本 的 基本 结构 < /TITLE> 
< SCRIPT language- "JavaScript" 
var count- 0; 


document.write ("淘宝 网 欢迎 您 1"); 
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for(i-0;i«5;i**) 


document .write ("<H2> 淘 宝 网 欢迎 您 !< /82» ") ; 


< /SCRIPT> 
< /HEAD> 
«BODY» 
<H1> BODY 部 分 的 内 容 < /H1> 
< /BODY> 
< /HTML» 


示例 在 浏览 器 中 的 预览 效果 如 图 2. 1 所 示 。 


O 肚 本 的 基本 结构 一 Windows Internet Explorer 


文件 @) REE EEV 收藏 夹 ) IAT) WRb00 
RRR | PERA- WE Binel35 - 时 尚 生活 必 ..， 图 百度 
tasti []|B8-&S-:cd&-mnm&o- 
HEAK 


淘宝 网 欢迎 您 ! 


淘宝 网 欢迎 您 ! 
淘宝 网 欢迎 您 ! 
淘宝 网 欢迎 您 ! 
淘宝 网 欢迎 您 ! 


LBODY 部 分 的 内 容 


, ij 我 的 电脑 


图 2.1 {A JavaScript 脚本 的 基本 结构 


JavaScript 代码 在 浏览 器 中 是 如 何 执行 的 呢 ? 浏览 器 从 标记 壹 HTML 二 开始 ,顺序 
往 下 解释 执行 ,所 以 上 述 JavaScript 语句 将 在 网 页 加 载 时 ,顺序 解释 执行 。Document. 
write() 方 法 类 似 于 Java 语言 中 的 print() 函数 ,表示 往 页 面 输出 显示 信息 。 

了 解 了 脚本 的 基本 结构 ,下 面 再 来 深入 了 解 一 下 脚本 的 执行 原理 。 在 脚本 的 执行 过 
程 中 ,浏览 器 客户 端 与 应 用 服务 器 应 采用 请 求 /响应 模式 进行 交互 ,如 图 2. 2 所 示 。 

下 面 逐步 分 解 一 下 这 个 过 程 。 

CD 浏览 器 接收 用 户 的 请 求 : 一 个 用 户 在 浏览 器 的 地 址 栏 中 输入 要 访问 的 页 面 (页 
面 中 包含 JavaScript 脚本 程序 ) 。 

(2) 向 服务 器 请 求 某 个 包含 JavaScript 脚本 的 页 面 .浏览 器 把 请 求 消息 (要 打开 的 页 
面 消息 ) 发 送 到 应 用 服务 器 端 .等 待 服务 器 端的 响应 。 

(3) 应 用 服务 器 端 向 浏览 器 发 送 响 应 消息 , 即 把 含有 脚本 的 HTML 文件 发 送 到 浏 
览 器 客户 端 ,然后 浏览 器 从 上 至 下 逐条 解析 HTML 标签 和 JavaScript 脚本 ,并 显示 页 面 
效果 呈现 给 用 户 。 
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2 客户 端 请 求 含 JS 的 页 面 
解析 HTML 标 签 和 
JavaScript 脚 本 


应 用 
返回 响应 服务 器 
从 服务 器 端 下 载 仿 
3 JavaScript 的 页 面 


图 2.2 脚本 执行 原理 


使 用 客户 端 脚本 的 好 处 有 以 下 两 点 。 

(1) 含 脚本 的 页 面 只 要 下 载 一 次 即 可 ,这 样 ,能 减少 不 必要 的 网 络 通信 。 

(2) 脚本 程序 是 由 浏览 器 客户 端 执行 ,而 不 是 由 服务 器 端 执 行 的 ,因此 ,能 减轻 服务 
器 端的 压力 。 

在 JavaScript 中 ,变量 的 命名 规则 与 Java 相同 。JavaScript 是 一 种 弱 类 型 语言 ,也 就 
是 说 ,在 声明 变量 时 ,不 需要 指定 变量 的 类 型 ,变量 的 类 型 由 赋 给 变量 的 值 确定 。 对 于 这 
一 点 不 像 Java 和 CE 那样 在 声明 的 同时 指定 变量 的 数据 类 型 。 

在 JavaScript 中 ,变量 是 使 用 关键 字 var 声明 的 。JavaScript 声明 变量 的 语法 格式 
如 下 。 


var 合法 的 变量 名 ; 


其 中 ,var 是 声明 变量 所 使 用 的 关键 字 ;“ 合 法 的 变量 名 ”是 遵循 JavaScript 变量 的 命名 规 
则 的 变量 名 (与 Java 变量 名 的 命名 规则 相同 )。 可 以 在 声明 变量 的 同时 为 变量 赋值 ,这 叫 
做 变量 的 初始 化 ;也 可 以 在 稍 后 的 脚本 中 为 变量 赋值 。 

同时 声明 和 赋值 变量 ,例如 : 


var count =10; 


在 声明 变量 count 的 同时 ,将 数值 10 赋 给 了 变量 count, 
也 可 以 在 一 行 代 码 中 声明 多 个 变量 ,各 变量 之 间 用 逗号 分 隔 ,例如 : 


var x,y,z -10; 
在 JavaScript 中 ,允许 不 声明 变量 而 直接 使 用 ,系统 将 会 自动 声明 该 变量 ,例如 : 
x-88; ”// 没 有 声明 变量 x, 直接 使 用 


document .write (x); 
将 会 在 页 面 上 输出 显示 88。 这 种 方法 容易 出 错 ,不 推荐 使 用 。 在 使 用 变量 之 前 请 先 声 明 
后 使 用 ,这 是 良好 的 编程 习惯 。 

运算 符 是 对 一 个 或 多 个 变量 或 值 (操作 数 ) 进 行 运算 ,并 返回 一 个 新 值 。 例 如 ,十 运 
算 符 可 以 将 两 个 数字 相 加 ,得 到 第 三 个 数字 。 

在 JavaScript 中 ,运算 符号 与 Java 中 相同 。 根 据 所 执行 的 运算 ,运算 符 与 Java 中 相 
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同 。 根 据 所 执行 的 运算 ,运算 符 可 分 为 以 下 类 别 。 
D 算术 运算 符 : 包括 十 一 .*、/ 人 %、 十 十 .一 一 、 一 ( 求 反 ) 。 
D 比较 运算 符 : 包括 < >、 < 一 一 > 一 =,=, 
O 逻辑 运算 符 : 包括 !、&&、 | 。 
OD 赋值 运算 符 : 包括 二 及 其 扩展 赋值 运算 符 。 
逻辑 控制 语句 用 于 控制 程序 的 执行 顺序 。 在 JavaScript 中 ,逻辑 控制 语句 主要 分 为 
三 类 :, 条 件 语句 、 循 环 语句 、switch 语句 。 
(1) 条 件 语 句 的 基本 语法 结构 如 下 。 
if (表达 式 ) 
(JavaScript 语句 1; ) 
else 
(JavaScript 语句 2; ) 
其 中 , 当 表达 式 的 值 为 true 时 ,执行 语句 1 ,否则 执行 语句 2。 如 果 if SX else 后 有 多 行 语 
句 , 则 写 在 大 括号 {} 内 。 
循环 语句 的 基本 语法 结构 如 下 。 
For (初始 化 ;条 件 ; 增 量 或 减 量 ) 
(JavaScript if 4]; ) 
其 中 ,初始 化 参数 告诉 循环 的 开始 值 , 必 须 赋 予 变 量 的 初 值 ; 条 件 是 用 于 判断 循环 终止 时 
的 条 件 , 若 满足 条 件 , 则 继续 执行 循环 体 中 的 语句 ,否则 跳出 循环 ; 增 量 或 减 量 是 定义 循 
环 控制 变量 在 每 次 循环 时 怎么 变化 。 在 三 个 条 件 之 间 ,必须 使 用 分 号 (;) 隔 开 。 
(2) while 循环 语句 的 基本 语法 如 下 : 
while( 条 件 ) 
(JavaScript 语句 ; ) 
其 中 , 当 条 件 为 真 时 ,就 执行 JavaScript 语句 ;相反 , 当 条 件 为 假 时 ,就 退出 循环 。 
switch 语句 的 基本 语法 结构 如 下 。 
语法 
switch (表达 式 ) 
{ case 常量 值 1: JavaScript 语句 1; 


case 常量 值 2: JavaScript 语句 2; 
case 常量 值 3: JavaScript 语句 3; 


Default: JavaScript 语句 4; } 


当 判 断 条 件 多 于 三 个 时 ,就 可 以 使 用 switch 语句 ,这 样 可 以 使 使 用 程序 的 结构 更 加 清晰 。 
switch 根据 一 个 变量 的 不 同 取 值 执行 不 同 的 语句 段 。 在 执行 switch 语句 时 ,表达 式 的 值 
将 从 上 往 下 与 每 个 case 语句 后 的 常量 做 比较 。 如 果 相 等 , 则 执行 该 case 语句 后 的 
JavaScript 语句 ;如 果 没 有 一 个 case 语句 的 常量 与 表达 式 的 值 相等 , 则 执行 default 语句 。 

为 了 适应 不 同 的 应 用 情况 .JavaScript 提供 了 两 种 数据 类 型 的 转换 方法 : 一 种 是 基 
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本 数据 类 型 转换 ,与 Java 中 的 数据 类 型 转换 相似 ; 另 一 种 是 从 一 个 值 中 提取 另 一 种 类 型 
的 值 ,并 完成 转换 工作 。 对 于 基本 数据 类 型 的 转换 上 文 已 经 讲 过 了 ,下 面 就 来 学 习 第 二 
种 数据 类 型 转换 ,完成 这 种 数据 类 型 的 转换 方法 有 两 种 : parseInt() 和 parseFloat(), 下 
面 分 别 给 予 介 绍 。 

对 于 parseInt() 和 parseFloat() 两 个 函数 ,它们 可 以 将 字符 串 转 换 为 整 型 或 浮 点 型 
数字 。 例 如 ,parseInt("86") 将 字符 串 "86" 转 换 为 整 型 值 86 ;parseFloat("35. 45") 将 字符 
串 "34. 45" 转 换 为 浮 点 值 34. 45。 如 果 parseFloat() 函 数 发 现 一 个 字符 ,而 不 是 符号 数字 
(0 一 9) .小 数 点 或 指数 , 它 将 忽略 该 字符 和 紧 跟 在 其 后 的 所 有 其 他 字符 ,此 函数 将 返回 
NaN(Not a Number. 非 数 字 ) 。 

下 面 通过 示例 2.2 和 示例 2. 3 来 加 深 对 JavaScript 基本 语法 的 理解 。 

示例 2.2 


«HTML» 
< HEAD» 
< SCRIPT LANGUAGE = "JavaScript"» 
function calcu()//4É X. calcu() 函 数 ,实现 两 个 数 相 乘 的 功能 
{ 
var numbl=document.calc.numl.value; /* 定义 变量 numbl, 并 获取 标 单 中 
输入 的 数据 : document .表单 名 .表单 元 素 名 .value, 然 后 把 获取 的 表单 值 赋 给 变量 numbl* / 
var numb2- document .calc.num?.value; 
var total- parseFloat (numbl) * parseFloat (numb2) ; 
document.calc.result.value-total; 
) 
< /SCRIPT» 
< /HEAD> 
< BODY» 
< FORM name= "calc"> 
竞拍 价格 : 
< INPUT name= "num2" TYPE- "text" id- "num?" value- "120" size-"15"» «BR» 
购买 数量 : 
< INPUT TYPE- "text" name- "numl" size- "15"> 
«BR» 
预计 总 价 : 
< INPUT name= "result" TYPE-"text" Size= "15"> 
</P> 
<P> 
< INPUT name= "getAnswer" TYPE- "button" id="getAnswer" onClick- "calcu ()" 
value= "计算 看 看 "> 
</P> 
< /FORM> 
< /BODY> 
</HTML> 
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其 中 ,document 代表 HTML 文档 对 象 ,其 具体 用 法 将 在 后 续 章 节 中 讲解 。 
在 浏览 器 中 查看 该 HTML 页 面 时 ,输出 结果 如 图 2. 3 所 示 。 


竞拍 价格 120 


购买 数量 10 
预计 总 价 ， 1200 


图 2.3 基本 语法 及 应 用 


像 Java 语言 一 样 ,在 JavaScript 中 也 是 先 定义 函数 ,然后 才 可 以 调用 执行 。 


Function KAA (参数 列表 ) 
{ 

//JavaScript 语句 ; 
} 


其 中 ,function 是 关键 字 。 

在 JavaScript 中 ,调用 函数 常用 的 方式 就 是 单 击 某 个 按钮 ,然后 调用 执行 某 个 函数 中 
的 脚本 代码 ,如 本 例 的 onClick= "calcu O "代表 鼠标 单 击 此 按钮 时 ,将 调用 函数 calcu()， 
执行 计算 功能 。 

获取 表单 数据 语法 如 下 : 

document .表单 名 .表单 元 素 名 .value 

如 果 获 取 “ 第 一 个 数 " 文 本 框 中 填写 的 数据 ,然后 赋值 给 变量 x, 则 代码 为 


x- document .calc.num?2.value; 
示例 2.3 


<HIML> 
« HEAD» 
«TITLE» 3E t 2 dil i] H </TITLE> 
< SCRIPT LANGUAGE = "JavaScript"» 
document .write("«H2 align- center> 打 印 倒 正 金字 塔 直线 < /H2» ") ; 
Var i-25; 
while (i> 0) 
{ 
document.write ("<HR align=center width=" +i+"%$>"); 


i=i-5; 
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} 
for (var j=5; j<30; j=j+5) 
document.write ("< HR align=center width=" +j+"%>"); 

< /SCRIPT> 

< /HEAD> 

« BODY» 

< /BODY> 

</HTML> 


上 述 例子 就 是 通过 直线 标签 二 HR 二 的 width 宽度 属性 ,循环 递增 或 递减 直线 的 宽 
BE ,形成 倒 正 金字 塔 的 直线 ,在 浏览 器 中 运行 示例 3, 输 出 结果 如 图 2.4 所 示 。 


打印 倒 正 金字 塔 直线 


图 2.4 演示 循环 语句 的 用 法 


函数 是 完成 特定 功能 的 一 段 程 序 代 码 , 比 如 简易 的 计算 器 、 层 的 切换 特效 、 属 性 菜单 
切换 和 表单 验证 等 。 函 数 不 仅 能 在 一 个 或 多 个 HTML 页 面 中 被 多 次 调用 ,而 且 能 够 在 
不 同 网 站 中 应 用 ,从 而 提高 了 代码 的 重用 率 。 

函数 为 程序 设计 人 员 带 来 了 很 多 方便 。 通 常 在 进行 一 个 复杂 的 程序 设计 时 ,总 是 根 
据 所 要 完成 的 功能 ,将 程序 划分 为 一 些 相对 独立 的 部 分 ,每 一 部 分 编写 一 个 函数 。 从 而 
使 各 部 分 充分 独立 ,任务 单一 ,使 程序 结构 清晰 , 易 读 、 易 懂 、 易 重用 、 易 维护 。JavaScript 
函数 可 以 封装 那些 在 程序 中 可 能 要 多 次 用 到 的 模块 ,并 可 作为 事件 驱动 的 结果 而 被 调 
用 。 从 而 实现 一 个 函数 把 它 与 事件 驱动 相关 联 。 

TE JavaScript 中 ,函数 类 似 于 Java 中 的 方法 ,是 执行 特定 任务 的 语句 块 。 可 以 将 值 
(实际 参数 ) 传 递 给 函数 ,函数 也 可 以 返回 一 个 值 。 接 下 来 ,就 有 一 个 需要 使 用 函数 才能 
较 好 解决 的 问题 。 

下 面 通过 示例 2.4 创建 函数 和 调用 函数 来 实现 如 图 2. 5 所 显示 的 页 面 。 

示例 2.4 


<HIML> 
«X HEAD» 
<TITLE> 脚 本 的 基本 结构 < /TITLE> 
<SCRIPT language- "JavaScript"> 


function showHello( ) 
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{ 
var count- document .myForm.txtCount .value ; 
for(i=0;i< count;i++) 
document .write ("<H2> HelloWorld« /H2> "); 
$ 
< /SCRIPT> 
< /HEAD> 


«BODY» 
< FORM name= "myForm" method= "post" action- ""» 
<P> 输 入 HelloWorld 的 次 数 : 
< INPUT name- "txtCount" type- "text" id- "txtCount"> 
</P> 
<P> 
< INPUT type="submit" name="Submit" value= "显示 HelloWorld" onClick= 
"showHello () "> 
«/P» 
< /FORM> 
< /BODY> 
< /HIML> 


示例 2.4 可 根据 用 户 输入 的 HelloWorld 的 次 数 . 来 动态 循环 输出 多 行 HelloWorld 
文字 ,运行 效果 如 图 2.5 所 示 。 


CB reete o- ox ensen > 有 


| XO REO SEV) KERA IAT) WMH 
i» 


输入 HeloWodld 的 次 数 ， 2 


2.5 循环 显示 文字 


如 示例 2. 5 所 示 ,加 减 乘除 每 个 按钮 都 调用 了 函数 computeCop) ,传递 了 相应 的 函数 
实际 参数 。OnClick 二 "compute(' 十 )" 表 示 单 击 “ 加 号 ”按钮 时 ,调用 函数 compute O ,十 
作为 参数 。 注 意 : 因为 compute(' 十 ) 外 面 已 经 有 双 引 号 (“”) ,这 里 的 “十 ”通常 变 成 单 引 
号 ,以 示 区 别 ,其 实 表示 的 意思 一 样 。 

示例 2.5 

<HIML> 


< HEAD» 
<TITLE> 计 算 器 < /TITLE> 


51 


< STYLE type="text/css"> 
.textBaroder /* 细 边 框 的 文本 输入 框 * / 


{ 


border- width:lpx; 
border- style:solid 


) 


< /STYLE» 


<SCRIPT language- "JavaScript" 


function compute (op) 


t 


) 


var numl,num?2; 

num1- parseFloat (document .myform.txtNuml.value); 

num2- parseFloat (document .myform.txtNum?.value); 

if (op=="+") 

document.myform.txtResult.value-numl*num2 ; 

if (ope "-") 
document.myform.txtResult.value-numl- num2 ; 

if (op=="* ") 
document.myform.txtResult.value-numl* num2 ; 

if (opp-"/" && num2!-0) 
document.myform.txtResult.value- numl/num2  ; 


< /SCRIPT» 


< /HEAD> 


< BODY» 

< FORM action="" method- "post" name- "myform" id- "myform"> 

< TABLE border= "0" bgcolor- "4 C9E495" align="center"> 
<TR> 


« TD colspan= "4"><H3> 购 物 简 易 计算 器 < /H3>< /TD> 


</TR> 
<TR> 


<TD > 第 一 个 数 < /TD> 


<TD colspan="3"> < INPUT name-"txtNuml" type-"text" class-"textBaroder" id-" 


txtNuml" size="25">< /TD> 


</TR> 
<TR > 


<TD> 第 二 个 数 < /TD> 


< TD colspan="3"> < INPUT name-"txtNum2" type="text" class-"textBaroder" id=" 


txtNum2" size- "25">< /TD> 


</TR> 
<TR> 


<TD> < INPUT name= "addButton2" type- "button" id- "addButton?" value=" 


$ 


" onClick 
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= "compute ('+ ') ">< /TD> 
< TD» < INPUT name= "subButton2" type="button" id-"subButton2" value=" 一 " onClick 
= "compute ('- ')"»« /TD» 
< TD» « INPUT name= "mulButton2" type- "button" id-"mulButton?" value=" X  " onClick 
-"compute(' * ')"»«/TD» 
« TD» < INPUT name= "divButton2" type="button" id- "divButton2" value=" +> " onClick 
="compute ('/') ">< /TD> 
</TR> 
<TR> 
<TD> 计 算 结果 < /TD> 
< TD colspan="3"> < INPUT name="txtResult" type="text" class="textBaroder" id=" 
txtResult" size="25">< /TD> 
</TR> 
< /TABLE> 
< /FORM> 
< /BODY> 
< /HIML> 


输出 结果 如 图 2.6 所 示 。 


图 2.6 有 函数 的 创建 和 调用 


2.2 DOM 编程 


HTML 文档 对 象 模 型 定义 了 一 套 标 准 方法 来 访问 和 操作 HTML 文档 。DOM 
(Document Object Model) 由 万 维 网 联盟 (World Wide Web Consortium, W3C) 定 义 , 最 
新 的 浏览 器 都 支持 第 1 级 和 第 2 级 DOM( 第 1 级 和 第 2 级 DOM 是 一 种 标准 ) ,这 样 使 用 
JavaScript 就 可 以 控制 整个 网 页 。 

自从 W3C 建立 了 DOM 标准 (W3C DOM) ,以 及 DOM 得 到 所 有 浏览 器 的 支持 以 
来 ,DOM 在 实际 应 用 中 越 来 越 广泛 。 

文档 对 象 模 型 提供 了 一 组 按 树 状 结构 组 织 的 HTML 文档 , 树 状 结构 中 的 每 一 个 对 
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象 称 为 一 个 节点 ,每 一 个 对 象 都 有 一 个 或 多 个 属性 与 方法 ,如 图 2.7 所 示 。 


文档 : Document 
根 节点 :<HTML> 
元 素 :<HEAD> [ 元素 <BopY> 
元 素 :<TITLE> 属性 : “HREF” 元 素 :<A> 元 素 :<H1> 
文本 :“ 购 物 网 站 ” 文本 :“ 我 的 链接 ”| | 文本 :“ 商 品 分 类 区 "” 


图 2.7 文档 的 层次 结构 


在 DOM 中 ,无论 对 象 是 什么 ,每 一 个 对 象 都 称 为 一 个 节点 。 节 点 又 分 为 根 节 点 、 父 
节点 . 子 节点 、 兄 弟 节点 和 叶子 节点 。 最 顶层 的 节点 称 为 根 节点 ,如 图 2.7 所 示 , 根 节点 
是 HTML>> ,二 HEAD> 和 所 BODY 之 是 父 节 点 HTML> 的 两 个 子 节点 。 拥 有 相同 
父 节 点 的 两 个 或 两 个 以 上 节点 称 为 兄弟 节点 ,如 二 HEAD 二 和 所 BODY 二 就 是 一 对 兄弟 
节点 。 位 于 树 状 结构 底部 的 节点 称 为 叶子 节点 ,如 “购物 网 站 ”“HREF”、“ 我 的 链接 ”、 
“商品 分 类 区 ”。 除 了 根 节点 和 叶子 节点 外 ,其 他 每 个 节点 都 有 一 个 父 节点 一 个 或 多 个 
子 节点 。 

DOM 是 W3C 国际 组 织 的 一 套 Web 标准 。 它 定义 了 访问 HTML 文档 对 象 的 一 套 
属性 方法 和 事件 。DOM 是 以 层次 结构 组 织 的 节点 或 信息 片段 的 集合 。 这 个 层次 结构 
允许 开发 人 员 在 树 中 导航 寻找 特定 信息 。 分 析 该 结构 通常 需要 加 载 整个 文档 和 构造 层 
次 结构 ,然后 才能 做 其 他 工作 。 由 于 它 是 基于 信息 层次 的 ,因而 DOM 被 认为 是 基于 树 或 
基于 对 象 的 。 另 外 ,DOM 是 给 HTML 与 XML 文件 使 用 的 一 组 API。 它 提供 了 文件 的 
结构 表述 ,通过 使 用 JavaScript 可 以 重 构 一 个 完整 的 HTML 文档 ,也 能 增加 、 删 除 、 修 改 
和 重新 安排 页 面 中 的 任何 元 素 。 其 本 质 是 建立 网 页 与 脚本 语言 或 程序 语言 沟通 的 桥梁 。 

下 面 通过 示例 2. 6 来 说 明 如 何 使 用 JavaScript 来 改变 网 页 中 指定 元 素 的 值 。 

示例 2.6 


<HIML> 
« HEAD» 
< SCRIPT type- "text/javascript"» 
function changeLink|() 
t 
document .getElementById ('myAnchor') .innerHTML- "搜狐 " ; 
document .getElementByld ( 'myAnchor') .href- "http: //www.sohu.com" ; 


} 

< /SCRIPT> 

< /HEAD> 

<BODY> 

«A id-"myAnchor" href- "http://www.taobao.com"> 淘 宝 < /A> 
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< INPUT type="button" onclick="changeLink()" value=" 使 用 DoM 改 变 链接 "> 
< /BODY» 
< /HTML» 


在 示例 2. 6 中 , document 是 DOM 对 象 ,表示 HTML 整个 页 面 文档 ,通过 使 用 
document 对 象 的 getElementByld('myAnchor”) 方 法 定位 或 得 到 链接 A 对 象 然后 利用 得 
到 链接 A 元 素 的 引用 访问 A 元 素 的 href 属性 和 innerHTML 属性 ,并 将 href 属性 和 
innerHTML 属性 的 值 分 别 修改 为 ~“http://www. sohu. com” 和 "搜狐 ”, 从 而 实现 链接 A 
元 素 的 超 链接 网 址 和 超 链接 文本 内 容 的 动态 改变 。 

浏览 器 是 用 于 显示 HTML 文档 内 容 的 应 用 程序 。 浏览 器 还 提供 了 一 些 可 以 在 脚本 
中 访问 和 使 用 的 对 象 。 

浏览 器 对 象 是 一 个 分 层 机 构 ,也 称 为 文档 对 象 模型 ,如 图 2. 8 所 示 o 


window 
history document location 
link form anchor 
] 
text radio button reset select 
textarea checkbox | | option | submit 


图 2.8 浏览 器 对 象 的 分 层 结构 


打开 网 页 后 ,首先 看 到 的 是 浏览 器 窗口 , 即 最 顶层 的 window XJ S£ «window 对 象 指 的 
就 是 浏览 器 窗口 本 身 。 其 次 是 看 到 的 网 页 文档 内 容 , 即 document 文档 , 它 的 内 容 包括 一 
些 超 链接 (link) KÉ Corm) 、 锚 (anchor) 等 。 表 单 由 文本 框 (text) 、 单 选 按钮 (radio) 、 按 
钮 (button) 等 表单 元 素 组 成 。 所 以 ,假定 myform 表单 中 有 一 个 文本 框 text1, 当 定 位 此 
文本 框 时 ,就 应 该 从 上 往 下 定位 此 文本 框 ,定位 的 结果 如 下 所 示 。 


Window.document .myform.textl。 


因为 window 窗口 对 象 是 所 有 页 面 内 容 的 根 对 象 .所 以 常常 省 略 ,改写 为 常见 的 
格式 : 


document .myform.textl, 


在 浏览 器 对 象 结构 中 ,除了 document 文档 对 象 外 ,位 于 根 对 象 window 之 下 还 有 两 
个 对 象 : 地 址 对 象 location 和 历史 对 象 history: 它 们 对 应 于 浏览 器 中 的 地 址 栏 和 前 进 / 后 
退 按钮 ,可 以 利用 这 些 对 象 的 方法 ,实现 类 似 的 功能 。 

window 对 象 是 JavaScript 浏览 器 对 象 模 型 中 的 顶层 对 象 .同时 ,window 对 象 也 称 
为 浏览 器 对 象 。 浏 览 器 打开 HTML 文档 时 ,通常 会 创建 一 个 window 对 象 。 然 而 ,如 果 
文档 定义 了 一 个 或 多 个 框架 .浏览 器 将 为 原始 文档 创建 一 个 window 对 象 ,同时 为 每 一 个 


框架 另外 创建 一 个 window 对 象 。 下 面 就 来 学 习 window 对 象 常用 的 属性 .方法 和 事件 。 
window 对 象 常用 的 属性 如 表 2. 1 所 示 。 
表 2.1 window 对 象 的 常用 属性 
名 称 说 明 名 称 说 明 


status “| 指定 浏览 器 状态 栏 中 显示 的 临时 消息 | location | 有 关 当 前 URL 的 信息 
screen “| 有 关 客 户 端的 屏幕 和 显示 性 能 的 信息 | document | 表示 浏览 器 窗 中 的 HTML 文档 
history | 有 关 客 户 访问 过 的 URL 的 信息 


window 对 象 的 常用 方法 如 表 2. 2 所 示 。 
表 2.2 window 对 象 的 常用 方法 

名 称 说 明 
alert(" 提 示 信 息 ") 显示 一 个 带 有 提示 信息 和 “确定 ”按钮 的 对 话 框 
confirm( "提示 信息 ") | 显示 一 个 带 有 提示 信息 “确定 ”和 “取消 ”按钮 的 对 话 框 
打开 具有 指定 名 称 的 新 窗口 ,并 加 载 给 定 URL. 所 指定 的 文档 ;如 果 没 有 提供 
URL, 则 打开 一 个 空白 文档 
closeO 关闭 当前 窗口 
showModalDialogO “| 在 一 个 模式 窗口 中 显示 指定 的 HTML 文档 


open(C"url"" name") 


了 解 了 window 对 象 的 常用 属性 和 常用 方法 之 后 ,再 来 看 看 window 对 象 的 事件 。 
其 实 window 对 象 有 很 多 事件 ,不 过 常用 的 不 多 。 比 较 常 用 的 window 对 象 事件 有 
onload 事件 , 它 表示 在 窗口 或 框架 完成 文档 加 载 时 触发 。 在 设计 或 维护 网 站 的 时 候 , 有 
时 网 站 要 作 重 大 的 变动 ,或 者 需要 作 什 么 声明 的 时 候 , 就 要 用 到 弹出 窗口 ,这 种 弹出 窗口 
在 网 站 中 经 常见 到 ,如 众所周知 的 弹出 式 网 站 公告 或 广告 等 。 下 面 就 通过 多 个 示例 来 学 
习 最 常用 的 弹出 窗口 。 

示例 2.7 


«HTML» 
« HEAD» 
«META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
« TITLE» window X} $$ « /TITLE» 
< SCRIPT language- "JavaScript"^ 
function openwindow() 
í 
window.status- "系统 当前 状态 : 您 正在 注册 用 户 ……"; 
if (window.screen.width ==1024 && window.screen.height 一 768) 
window.open ("register.html"); 
else 


window.alert ("请 设置 分 辨 率 为 1024X 768, 然 后 再 打开 "); 


56 


49. «22558 


function closewindow () 
{ 
if (window.confirm(" 您 确认 要 退出 系统 吗 ?")) 
window.close(); 
) 
< /SCRIPT> 


< /HEAD> 
< BODY bgcolor= "# CCCCCC"> 
< TABLE border= "0" align="center" bgcolor= "# FFFFFF"> 
<TR> 
« TD» « IMG src- "images/head. jpg" width= "761" height- "389">< /TD> 
</TR> 
<TR> 
<TD ><IMG src- "images/foot.jpg" width= "502" height- "90" align- "top"> 
< INPUT type="button" name- "regButton" value=" 用 户 注册 " onclick= 
"openwindow()"» 
< INPUT type="button" name- "exitButton" value=" iB 出 " onclick- 
"closewindow () "> < /TD> 
</TR> 
< /TABLE> 
< /BODY> 
< /HTML> 


当 用 户 单 击 “ 用 户 注 册 ” 按 钮 时 ,会 调用 window. open() 方 法 打开 新 窗口 ,并 显示 注 
册页 面 。 当 用 户 单 击 “ 退 出 ”按钮 时 ,会 调用 window. close() 方 法 ,同时 会 弹出 一 个 确认 
退出 对 话 框 ,询问 用 户 是 否 真 的 要 关闭 当前 窗口 , 若 想 关闭 页 面 ,可 单 击 “ 确 定 ” 按 钮 , 相 
反 , 单 击 “ 取 消 ?按钮 。 

由 于 window 是 根 对 象 ,一 般 常 省 略 , 所 以 上 述 代 码 中 window. open C" register 
.html") 可 缩写 为 open("register. html")。close() 方 法 也 是 如 此 。 

当 打 开 很 多 门户 网 站 或 知名 站 点 时 ,伴随 而 来 的 都 是 一 个 或 多 个 弹出 窗口 ,这 是 如 
何 实现 的 呢 ? 还 是 使 用 open() 方 法 ,只 不 过 多 添加 了 一 些 函数 , 它 可 以 指定 打开 窗口 的 
url 地 址 、 大 小 等 。 


open(" 打 开 窗 口 的 url", "窗口 名 "," 窗 口 特征 ") 
窗口 的 特征 属性 如 表 2. 3 所 示 , 可 以 任意 组 合 。 
表 2.3 窗口 特征 属性 


名 称 说 明 
height 窗口 的 高 度 
width 窗口 的 宽度 
toolbars 浏览 器 工具 条 .包括 “后 退 " 和 “前 进 " 按 钮 等 .是 否 显 示 工 具 栏 ,yes 为 显示 


scrollbars 是 否 显示 滚动 条 


续 表 
名 称 说 明 
menubar 显示 菜单 栏 
location 是 否 显示 地 址 栏 ,yes 或 1 为 是 ,no 或 0 为 否 
status 是 否 显示 状态 栏 内 的 信息 (通常 是 文件 已 经 打开 ) ,yes 或 1 为 允许 
resizable 是 否 允 许 改变 窗口 的 大 小 ,yes 或 1 为 是 ,no 或 0 为 否 


需要 预先 注册 好 页 面 ,假设 为 register. html, 打 开 注 册页 面 的 语句 如 下 所 示 。 


open("register.html", "ik MA L1", "toolbars- 0, location- 0, statusbars- 0, menubars- 0, 
width= 700,height- 550, scrollbars- 1"); 


即 表示 打开 的 网 页 为 register. html; fi O 44 Ej Jg " HEEL" stoolbars —0 表示 无 工具 栏 ; 
location —0 表示 无 地 址 栏 ;statusbars 王 0, 表 示 无 状态 栏 ;menubars 王 0 表示 无 菜单 栏 ; 打 
窗口 的 宽 为 700 像素 ,高 为 550 ff XE sscrollbars 1 表示 显示 滚动 条 。 完 整 的 代码 如 示 
例 2.8 所 示 。 
示例 2.8 


<HIML> 
< HEAD» 
« TITLE» window 对 象 < /TITLE> 
< SCRIPT language- "JavaScript"» 
function openwindow() 
1 
window.status- "系统 当前 状态 : 您 正在 注册 用 户 ……"; 
if (window.screen.width ==1024 && window.screen.height 一 768) 
open ("register.html", "注册 窗口 ", "toolbars=0, location=0, statusbars- 0, menubars- 
0,width- 700,height- 550,scrollbars- 1"); 
else 
window.alert (" 请 设置 分 辩 率 为 1024X 768, 然 后 再 打开 "); 


} 
function closewindow () 
{ 
if (window.confirm(" 您 确认 要 退出 系统 吗 ?")) 
window.close(); 
} 
< /SCRIPT> 
<STYLE type= "text/css"> 
全 
body ( 
background- color: £$ CCCCCC; 
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< /STYLE» 


< /HEAD> 


«BODY» 
< TABLE border= "0" align="center" bgcolor= "£ FFFFFF"> 
<TR> 
« TD» < IMG src= "images/head.jpg" width= "761" height- "389"></TD> 
</TR> 
<TR> 


<TD >< IMG src="images/foot.jpg" width= "502" height- "90" align= "top"> 


< INPUT type- "button" name- "regButton" value- "用 户 注 册 " onclick- 
"openwindow () "> 

< INPUT type- "button" name- "exitButton" value- "iR iti" onclick- 
"closewindow () ">< /TD> 


</TR> 
< /TABLE> 
< /BODY> 
< /HTML» 


如 果 想 把 按钮 的 单 击 事件 改 为 响应 链接 事件 ,也 就 是 单 击 一 个 超 链接 调用 


JavaScript 


相关 代码 也 能 打开 注册 页 面 , 该 如 何 编写 ”其 实 不 难 , 把 示例 中 的 鼠标 单 击 事 


件 代码 改 为 如 示例 2.9 所 示 的 代码 片段 ,也 能 实现 与 示例 2. 8 相同 的 功能 。 
示例 2.9 


« TD width= "86" valign="top" »«H3» «A href= "javascript: openwindow() "> 用 户 注 册 </a> </ 
H3» < /TD> 


<TD 


width= "263" valign="top" »«H3» «A href- "javascript:closewjndow ()"> 退 出 </a> < /H3 


></TD> 


将 文本 “用 户 注 册 ” 和 “退出 ”的 超 链接 文本 href 属性 , 改 为 调用 JavaScript 语句 
openwindow() 和 closewindow() ,就 可 以 实现 与 示例 2. 8 一模一样 的 功能 。 请 注意 一 定 
要 在 超 链接 href 属性 后 加 上 前 缀 “javascript”, 和 否则 href 属性 会 解析 为 超 链接 的 文件 名 。 

通过 超 链接 来 调用 JavaScript 语句 , 当 JavaScript 语句 较 少 时 ,可 以 直接 插入 代码 ， 
如 二 A href— "javascript: history. go D); " 7 JB </A>; 4 JavaScript 语句 较 多 时 ,应 
把 语句 放 在 一 个 函数 中 ,然后 调用 函数 ,如 示例 2. 9 中 的 二 A href =" javascript: 
closewindow()" 盖 退出 二 /A>, 这 是 一 个 良好 的 编程 习惯 。 

其 实 , 在 浏览 一 些 门户 网 站 或 知名 站 点 时 :更 多 的 见 到 的 是 自动 弹出 式 网 站 公告 或 


广告 等 ,如 


图 2. 10 所 示 ,自动 弹出 的 “mycom 广告 专栏 ?页 面 是 如 何 实现 的 呢 ? 还 是 使 用 


open() 方 法 ,只 不 过 要 添加 一 个 事件 ,以 在 窗口 中 完成 文档 加 载 时 自动 调用 openwindow() 
方法 。 这 个 事件 就 是 前 面 刚 介 绍 的 onload 事件 。 实 现 图 2. 10 所 示 的 页 面 效 果 所 对 应 的 
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完整 代码 如 示例 2. 10 所 示 。 
示例 2. 10 


<HTML> 
< HEAD> 
<META http- equiv- "Content- Type" content= "text/html; charset= gb2312"> 
<SCRIPT language= "JavaScript" > 
function openwindow () 
{ 
open("adv.htm"，" 广 告 窗口 "，"toolbars= 0，scrollbars= 0, location- 0, statusbars- 0, 
menubars- 0, resizable- 0, width- 700, height- 250"); 
) 
< /SCRIPT» 
< STYLE type="text/css"> 
过 和 
body { 
background- image: url(images/index image.jpg); 
) 
--> 
< /STYLE> < /HEAD> 
<BODY onLoad= "openwindow () "> 
«H2» &nbsp;< /H2> 
< /BODY> 
< /HTIML» 


在 开发 网 站 时 ,有 时 需要 弹出 网 页 模式 对 话 框 , 它 在 父 窗口 之 上 (如 图 2. 9 中 “注册 
页 面 ? 对 话 框 ) ,必须 关闭 “注册 页 面 " 对 话 框 ,才能 访问 父 窗口 (“window 对 象 " 页 面 ) ,否则 不 
能 访问 父 窗口 ,这样 的 模式 对 话 框 如 何 实现 ? 其 实用 window 对 象 中 的 showModalDialog() 
方法 就 可 以 实现 。 下 面 通过 示例 2. 11 来 实现 如 图 2. 9 所 示 的 打开 模式 对 话 框 。 


图 2.9 打开 模式 对 话 框 
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示例 2. 11 


«HTML» 
« HEAD» 
«META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
« TITLE» window 对 象 < /TITLE> 
<SCRIPT language- "JavaScript"> 
function openwindow () 
{ 
window.status- "系统 当前 状态 : 您 正在 注册 用 户 …… "7 
if (window.screen.width —— 1024 && window.screen.height == 768) 


window.showModalDialog ("register. html", "注册 窗口 ",，"toolbars= 0, location- 0, 


Statusbars- 0, menubars- 0,width- 700,height- 550, scrollbars- 1"); 


else 


window.alert ("请 设置 分 辨 率 为 1024X 768, 然 后 再 打开 "); 


} 
function closewindow () 
{ 
if (window.confirm(" 您 确认 要 退出 系统 吗 ?")) 
window.close(); 


) 


< /SCRIPT> 

< STYLE type="text/css"> 

«1-- 

/* 设置 无 下 划 线 的 超 链 接 样式 * / 
AÍ( 


color: blue; 
text- decoration: none; 
i 
A:hover( /* UPRTE E BEBE b 3k F8 2E Ju (19 Bit (6. 
color: red; 
} 
--> 
< /STYLE> 
< /HEAD> 


* 
~ 


< BODY bgcolor= "#CCCCCC"> 


< TABLE border= "0" align="center" bgcolor- "£ FFFFFF" > 
<TR> 
« TD colspan= "3">< IMG src= "images/head. jpg" width- "761" height="389">< /TD> 
</TR> 
<TR> 
<TD width= "502" > 
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< IMG src= "images/foot.jpg" width- "502" height- "90" align- "top">< /TD» 


« TD width- "86" valign="top" »« H3» « A href- "javascript: openwindow() "> 用 户 注册 < /A 


>< /H3>< /TD> 


« TD width- "263" valign="top" ><H3> <A href-"javascript: closewindow() "> 退 Hi </A> 


< /H3» « /TD> 


</TR> 
< /TABLE> 
< /BODY> 
« /HTML» 


示例 2. 11 的 运行 结果 如 图 2. 9 所 示 , 在 本 例 中 主要 应 用 了 window 对 象 的 
showModalDialog() 方 法 ,该 方法 用 于 弹出 模式 对 话 框 ,其 语法 格式 如 下 。 


showModalDialog ("打开 对 话 框 的 url", "Xd if HE d n, "对话 框 特征 ") 


对 话 框 的 特征 如 表 2.4 所 示 , 可 以 任意 组 合 。 


表 2.4 对 话 框 特征 属性 


名 称 说 明 
height 对 话 框 的 高 度 
width 对 话 框 的 宽度 
toolbars 浏览 器 工具 条 ,包括 后退" 和“ 前进 "按钮 等 ,是 否 显 示 工 具 栏 ,yes 为 显示 
scrollbars 是 否 显示 滚动 条 
menubar 表示 菜单 栏 
location 是 否 显 示 地 址 栏 ,yes 或 1 为 是 ,no 或 0 为 否 
status 是 否 显 示 状 态 栏 内 的 信息 (通常 是 文件 已 经 打开 ) ,yes 或 1 为 允许 
statusbars 设置 浏览 器 的 状态 栏 是 否 可 见 
resizable 是 否 允 许 改变 窗口 的 大 小 ,yes 或 1 为 是 .no 或 0 为 否 


时 间 是 大 家 都 很 关注 并 在 意 的 东西 ,所 以 如 果 在 网 页 的 导航 栏 中 或 其 他 位 置 显示 当 
时 的 时 间 、 星 期 、 日 期 的 话 , 会 给 浏览 者 提供 很 多 便利 ,同时 也 会 为 网 页 增加 特色 ,如 


图 2.10 所 示 。 


Date 对 象 是 内 置 对 象 , 它 包含 日 期 和 时 间 两 个 信息 。Date 对 象 没 有 任何 属性 ,但 有 
大 量 用 于 设置 .获取 和 操作 日 期 的 方法 ,从 而 实现 在 页 面 中 显示 不 同类 型 的 日 期 时 间 。 
Date 对 象 将 日 期 存储 为 自 1970 年 1 月 1 日 子夜 为 起 点 以 来 的 毫秒 数 。 

创建 日 期 对 象 的 语法 如 下 。 


var 日 期 对 象 -new Date (参数 ); 


其 中 ,日 期 对 象 是 存储 Date 对 象 的 变量 。 
参数 可 以 是 以 下 任意 一 种 形式 。 
CD 没有 参数 , 即 如 果 没 有 指定 参数 , 则 表示 当前 日 期 和 时 间 ,例如 : 


var tobay =new Date(); 


将 当前 日 期 和 时 间 存 储 在 变量 tobay 中 。 


E) D:\Java5cript 客 户 端 验证 和 页 面 特效 制作 \JavaScript_chapter2\PH| 


[基石 信誉 ] 五 区 阴影 之 刺 联盟 600 点 在 线 快 充 〈 另 有 全 区 点 1 


一 口 从 : 26.50x 


运费 : 卖家 承担 运费 


T) 


e 此 宝贝 支持 支付 宝 ， 网 上 汇款 免 手续 费 。 
收 货 满意 后 卖家 才能 拿 钱 ， 货 款 都 安全 ? 


本 期 售 出 : 
RiSt: 
宝贝 类 型 : 
宝贝 数量 : 9999 fF 


当前 时 间 : 


图 2.10 动态 显示 时 钟 


(2) 字符 串 一 一 以 格式 “MM DD. YYYY.hh: mm: ss” 表 示 日 期 和 时 间 , 例 如 : 


var tdate =new Date("July 29,2008,10:30:00"); 
Date 对 象 的 方法 组 如 表 2.5 所 示 。 
表 2.5 Date 对象 的 方法 组 


方法 组 说 明 


方法 组 说 明 


SetXxx 这 些 方 法 用 于 设置 时 间 和 日 期 值 GetXxx 这 些 方法 用 于 获取 时 间 和 日 期 值 


Date 对 象 方法 的 参数 值 及 其 对 应 的 整数 如 表 2. 6 Bros o 
表 2.6 显示 值 及 其 对 应 的 整数 


值 正 数 
Seconds( 秒 ) 和 Minutes( 分 钟 ) 0 一 59 
Hours 0 一 23 
Day 0 一 6( 星 期 中 的 每 一 天 ) 
Date 1 一 31( 一 个 月 中 的 每 一 天 ) 
Months 0—110—12 H) 


现在 了 解 get set 方法 的 功能 。 
1. get 方法 
get 方法 如 表 2. 7 所 示 。 
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表 2.7 使 用 get 分 组 的 方法 


方法 说 上 明 

GetDate() 返回 Date 对 象 的 一 个 月 中 的 每 一 天 ,其 值 介 于 1 一 31 

GetDay() 返回 Date 对 象 的 星期 中 的 每 一 天 ,其 值 介 于 0 一 6 

GetHours() 返回 Date 对 象 的 小 时 数 ,其 值 介 于 0 一 23 

GetMinutes() 返回 Date 对 象 的 分 钟 数 , 其 值 介 于 0 一 59 

GetSeconds() 返回 Date 对 象 的 秒 数 ,其 值 介 于 0 一 59 

GetMonth() 返回 Date 对 象 的 月 份 , 其 值 介 于 0 一 11 

GetFullYear() 返回 Date 对 象 的 年 份 ,其 值 为 4 位 数 

GetTime() 返回 自 某 一 时 刻 (1970 年 1 月 1 日) 以 来 的 毫秒 数 
2. set 方法 


set 方法 如 表 2. 8 所 示 。 


表 2.8 使 用 set 分 组 的 方法 


方 法 说 明 
SetDate() 设置 Date 对 象 的 一 个 月 中 的 每 一 天 ,其 值 介 于 1 一 31 
SetHours() 设置 Date 对 象 的 小 时 数 ,其 值 介 于 0 一 23 
SetMinutes() 设置 Date 对 象 的 分 钟 数 ,其 值 介 于 0 一 59 
SetSeconds() 设置 Date 对 象 的 秒 数 ,其 值 介 于 0 一 59 
SetTimeO 设置 Date 对 象 内 的 时 间 值 
SetMonth() 设置 Date 对 象 中 的 月 份 ,其 值 介 于 0 一 11 
SetFullYear() 设置 Date 对 象 的 年 份 值 


Date 对 象 的 使 用 方法 如 示例 2. 12 所 示 。 
示例 2. 12 


« 


< 


« 


« 


« 


HTML» 

HEAD» 

META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
TITLE» date Xj $ < /TITLE» 

SCRIPT language- "javaScript"» 


function disptime|() 


t 


var now- new Date (); 
var hour -now.getHours(); 
if (hour>=0 && hour «- 12) 
document .write ("<H2> 上 午 好 !< /H2» ") 
if (hour> 12 && hour« -18) 
document .write("<H2> 下 午 好 !< /H2» ") ; 
if (hour>18 && hour «24) 
document .write ("< H2» fe H 3f 1« /82» ") ; 
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document.write ("« H2» 4 X H 18] :"+ now. getYear ()+" 年 "+ (now.getMonth ()+1)+" 月 "+ now. 
getDate ()+ "H « /H2» ") ; 
document.write ("< H2» Jl E H} [B] :"+ now.getHours () + "Hi "+ now.getMinutes ()+ "分 
</H2> "); 
} 
< /SCRIPT> 
< BODY onload= "disptime () "> 
< /BODY» 
< /HTML> 


示例 2. 12 使 用 Date() 方 法 创建 了 一 个 当前 日 期 和 时 间 对 象 ,然后 调用 相关 方法 实 
现 分 时 间 候 。 由 于 now. getMonth() 方 法 返回 的 月 份 数 0 一 11 ,为 了 与 中 国 的 1 一 12 月 相 
对 应 ,所 以 加 1。 返 回 星期 几 的 方法 getDay() 也 是 如 此 。 运 行 效果 如 图 2. 11 所 示 。 


| 下 午 好 ! 


今天 日 期 :2012 年 7 月 27 日 
现在 时 间 :16 点 20 分 


2.11 显示 时 间 


下 面 就 一 起 来 改进 示例 2. 12 ,从 而 实现 时 间 的 动态 显示 ,如 示例 2. 13 所 示 。 
示例 2. 13 


<HIML> 

« HEAD» 

«META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
« TITLE» setTimeout () 方 法 < /TITLE» 

< SCRIPT language- "javascript"» 

r= 

function disptime () 

{ 


var time =new Date() ; // 获 得 当前 时 间 
var hour -time.getHours(); // 获 得 小 时 


var minute =time.getMinutes(); ”// 获 得 分 钟 
var second -time.getSeconds(); // 获 得 秒 钟 


/* 设置 文本 框 的 内 容 为 当前 时 间 * / 


document .myform.myclock.value =hour+ ":"+minute+ " :n+ second*" " ; 
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/* 设置 定时 器 每 隔 1s (1000ms) ,调用 函数 disptime () 执 行 , 刷 新 时 钟 显示 * / 
Var myTime = setTimeout ("disptime ()", 1000) ; 
} 


Pf 

< /SCRIPT> 

< STYLE type="text/css"> 

< 一 

/* 设 置 样式 : 无 边框 的 文本 框 * / 

INPUT { 
font- size: 30px7 
border- style:none ; 
background- color:# FF8B3B; 
) 

=> 

< /STYLE> 

< /HEAD> 


<BODY onLoad= "disptime () "> 
< FORM NAME- "myform"> 
< TABLE width= "100%" border- "0" align="center"> 
<TR> 
<TD width= "37$ "> gnbsp;< /TD> 
« TD width= "41% ">< H2» 当前 时 间 : 
< INPUT name= "myclock" type="text" value="" size="10" > 
< /H2» « /TD> 
<TD width= "225 "> gnbsp;< /TD> 
</TR> 
< /TABLE> 
< /FORM > 
< /BODY> 
< /HIML> 
这 样 时 钟 会 随 着 当前 时 间 的 改变 而 不 断 地 跳动 ,从 而 实现 不 断 地 动态 显示 。 
history 对 象 是 通过 JavaScript 运行 时 引擎 自动 创建 的 ,并 且 是 由 一 系列 URLs 组 成 
的 。 这 些 URLs 是 用 户 在 一 个 浏览 器 中 已 访问 过 的 URLs, 所 以 可 以 方便 地 使 用 TE 浏览 
器 的 “前 进 " 和 “后 退 ” 按 钮 图 标 。history 对 象 具有 非常 类 似 的 功能 , 它 的 back() 方 法 相 
当 于 “后 退 ” 按 钮 ,forward() 方 法 相当 于 “前 进 ” 按 钮 。 
goCnumber) 方 法 使 浏览 器 前 进 ( 如 果 number 为 正 ) 或 后 退 ( 如 果 number 为 负 ) 指 定 
的 页 面 数 。 
例如 : 
history. go(1) 代 表 前 进 1 页 ,相当 于 IE 中 的 “前 进 ” 按 钮 .等 价 于 forward() 方 法 。 
history. go( 一 1) 代 表 后 退 1 页 ,相当 于 IE 中 的 “后 退 ” 按 钮 ,等 价 于 back() 方 法 。 
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history 对 象 的 常用 方法 如 表 2.9 所 示 。 
表 2.9 history 对 象 的 方法 


名 称 说 明 
back() 加 载 history 列表 中 的 上 一 个 URL 
forward() 加 载 history 列表 中 的 下 一 个 URL 


go("url"or number) 加 载 history 列表 中 被 指定 的 URL, 或 要 求 浏览 器 移动 指定 的 页 面 数 


location 对 象 是 通过 JavaScript 运行 时 引擎 自动 创建 的 ,此 对 象 相当 于 正 浏览 器 中 的 地 
址 栏 ,包含 了 关于 当前 URL 地 址 的 信息 , 它 提供 了 一 种 重新 加 载 窗 口 当 前 URL 的 方法 。 
location 对 象 的 常用 属性 如 表 2. 10 所 示 。 


表 2. 10 location 对 象 的 属性 


名 称 说 明 
host 设置 或 返回 URL 的 主机 名 和 端口 号 
hostname 设置 或 返回 URL 主机 名 部 分 
href 设置 或 返回 完整 的 URL 字符 串 


location 对 象 的 常用 方法 如 表 2. 11 所 示 。 
表 2.11 location 对 象 的 方法 


名 R 说 明 
assign("url") M URL 指定 的 新 的 HTML 文档 
reload() 重新 加 载 当 前 页 
replace("url") 通过 加 载 URL 指定 的 文档 来 替换 当前 文档 


示例 2. 14 


<HIML> 
< HEAD» 
«TITLE» f fj </TITLE> 
< STYLE type="text/css"> 
E cs 
/#* 设置 无 下 划 线 的 超 链接 样式 * / 
A( 

color: blue; 

text- decoration: none; 

} 
A:hover( /* 鼠标 在 超 链接 上 悬 停 时 变 为 的 颜色 x* / 


color: red; 
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<BODY> 
< FORM name= "forml" method= "post" action=""> 
< TABLE width= "100%" border- "0" cellpadding- "0" cellspacing= "0"> 
<TR> 
<TD colspan= "7"» « IMG src-"../images/headl.jpg" width= "994" height= "37"> 
</TD> 
</TR> 
<TR> 
« TD width= "15$ "> gnbsp;< /TD> 
< TD width= "32$ "><A href="#"> 1< /A><A href= "# "></A><A href="#"> &nbsp; 
2< /A><A href= "# ">< /A><A href="#"> &nbsp;3< /A><A href="#"> &nbsp;4< /A» 
<A href="#"></A><A href="#"> &nbsp;5</A><A href="# "></A><A href = 
"# "> &nbsp; 6< /A><A href="#"> &nbsp; F — Ji « /A>< /TD> 
« TD width= "4$ "><A href= "javascript: history.go (- 1) ">36 |E] < /A» « /TD» 
« TD width- "4$ "><A href= "javascript: history.go(1)"> 前 进 < /A» « /TD> 
« TD width="4% "><A href= "javascript: location.reload()"> 刷 新 </a> < /TD> 
« TD width="6% "><A href-"../index.html"» Ë Ji « /A>< /TD» 
« TD width- "35$ "> 
跳 转 到 其 他 版 块 
< SELECT name-"selTopic"  id-"selPTopic" onChange-"javascript: location- this. 
Value"> 
«OPTION value- "news.html"> 新 闻 贴 图 < /OPTION> 
«OPTION value= "gard.html"> 网 上 谈 兵 < /OPTION» 
«OPTION value- "IT.html">IT 茶 馆 < /OPTION> 
«OPTION value- "education.html" selected > 教育 大 家 谈 < /OPTION> 


</SELECT> 
</TD> 
</TR> 
<TR> 


< TD colspan= "7"» « IMG src- "../images/contentl.jpg" width= "995" height= 
"576"» « /TD> 
</TR> 
< /TABLE> 
< /FORM> 
< /BODY> 
< /HTML> 


示例 2. 14 的 运行 效果 如 图 2.12 所 示 。 从 图 2. 12 中 可 以 看 出 .“ 跳 转 到 其 他 版 块 ”" 下 
拉 列 表 框 中 默认 被 选中 的 选项 为 “教育 大 家 谈 ”。 由 于 在 当前 浏览 器 中 仅仅 只 打开 过 一 
个 页 面 (education. html 所 对 应 的 页 面 ) ,没有 形成 一 个 URLs 列表 ,所 以 没有 上 一 个 页 面 
和 下 一 个 页 面 的 说 法 ,也 就 无 从 谈 起 "返回" 和“ 前进 ”功能 , 即 浏览 器 中 的 “后 退 ” 和 “前 
进 ” 按 钮 失效 。 

如 果 要 使 图 2. 12 所 示 页 面 中 的 “返回 "和 “前 进 ” 超 链接 起 作用 ,也 就 是 说 浏览 器 中 
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的 “后 退 " 和 “前 进 ” 按 钮 有 效 , 那 么 应 该 怎么 办 ? 其 实 很 简单 ,就 像 大 家 排队 买 车 票 或 打 
饭 一 样 ,一 个 人 无 从 谈 起 前 面 一 个 人 和 后 面 一 个 人 ,所 以 必须 有 两 个 或 两 个 以 上 人 才 有 
前 和 后 这 一 说 法 。 这 里 “返回 "和 “前 进 ” 与 排队 相似 ,所 以 必须 在 同一 浏览 器 中 再 打开 一 
个 页 面 ,如 图 2. 13 所 示 (IT. html 所 对 应 的 页 面 )。 在 图 2. 13 所 示 (IT. html 所 对 应 的 页 
面 ), 单 击 “ 后 退 ” 按 钮 或 “返回 " 超 链接 就 可 以 切换 到 图 2. 13 所 示 的 页 面 ; 在 图 2. 13 中 ， 
单 击 “ 前 进 ” 或 “前 进 ” 超 链接 就 可 以 切换 到 图 2. 12 所 示 的 页 面 。 也 就 是 图 2. 12 的 后 退 
页 面 对 应 于 图 2.13 ,图 2. 13 的 前 进 页 面 对 应 于 图 2. 12。 
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history 的 back O MI forward() 方 法 可 以 实现 前 进 和 后 退 功 能 ,同样 ,history 对 象 的 
go( 一 1) 和 go(1) 方 法 也 能 实现 前 进 和 后 退 功 能 ,关键 代码 如 下 。 


<TD ><A href="jacascript:history.go(-1);"> 返 回 </A></TD> 

<TD ><A href="jacascript:history.go(1);"> 前 进 < /A» < /TD> 

把 示例 2. 14 中 的 文本 “返回 "和 “前 进 ” 的 超 链接 href 属性 ,分 别 改 为 调用 JavaScript 
语句 history. go ( — 1) 和 history. go (1) 就 可 以 了 。 提 示 一 下 ,一 定 要 加 上 前 缀 
"javascript; ”, 否 则 href 属性 会 解析 为 超 链 接 的 文件 名 。 反 复 强 调 , 当 JavaScript 语句 较 
少时 , 像 本 示例 一 样 可 以 直接 插入 代码 ; 当 JavaScript 语句 较 多 时 ,应 把 语句 放 在 一 个 函 
数 中 ,然后 调用 函数 ,这 是 一 个 良好 的 编程 习惯 。 

document 对 象 提供 的 方法 很 多 ,不 过 常用 的 是 其 中 的 两 个 ,如 表 2. 12 所 示 。 


表 2.12 document 对 象 的 方法 


名 称 说 有明 


根据 HTML 元 素 指定 的 ID ,获得 唯一 的 一 个 HTML 元 素 ,如 访问 DIV 层 对 
象 .图 片 img 对 象 等 

根据 HTML 元 素 指定 的 name, 获 得 相同 名 称 的 一 组 元 素 , 如 访问 表单 元 素 
(全 选 功能 ) 


GetElementByld() 


GetElementsByName() 


利用 bgColor 属性 ,可 以 动态 改变 页 面 文档 的 背景 色 , 如 图 2. 14 所 示 。 在 一 行 上 放 
置 三 种 颜色 , 提示 用 户 移 过 来 改变 背景 色 。 由 于 鼠标 悬 停 事件 onMouseOver 需要 和 
HTML 标签 元 素 配合 使 用 ,所 以 特意 把 这 3 种 颜色 放置 在 3 个 二 SAPN 二 容器 标签 内 。 
代码 如 示例 2. 15 所 示 。 

示例 2.15 


<HTML> 
<HEAD> 
<META http- equiv- "Content- Type" content= "text/html; charset= gb2312"> 
«TITLE» jl id document 对 象 相关 属性 动态 改变 背景 色 < /TITLE> 
< SCRIPT language= "JavaScript"> 
function change (color) 
{ 
document .bgColor= color ; 
) 
< /SCRIPT> 
< /HEAD> 


<BODY> 

<H2> 移 过 来 我 变色 给 你 看 看 !< /H2> 

<FONT size= 4> < SPAN onMouseOver- "change (' red ' ) "» Æ ZT f, « /SPAN» |< SPAN onMouseOver- " 
change ('blue') "» 7E jf; (& « /SPAN» |< SPAN onMouseOver- "change (' yellow')"» 2E Bf f& « /SPAN» < /FONT> 
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< /BODY> 

< /HIML> 

示例 2. 15 的 运行 效果 如 图 2. 14 所 示 。 在 图 中 只 显示 了 一 种 背景 色 ,其 实 可 以 显示 
三 种 不 同 的 背景 色 , 即 红色 、 蓝 色 和 黄色 。 


|) E-\JavaScript 客 户 & E 好 |[X [3 百度 一 下 f 
EEV BEAN IAM) 帮助 00 


移 过 来 我 变色 给 你 看 看 ! 
变 红色 | 变 蓝 色 | 变 黄色 


图 2.14 应 用 document 对 象 的 bgColor 属性 
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无 论 是 动态 网 站 ,还 是 其 他 B/S 结构 的 系统 ,都 离 不 开 表单 。 表 单 作 为 客户 端 向 服 
务 器 提交 数据 的 主要 载体 ,扮演 着 十 分 重要 的 角色 ,这 就 引出 了 一 些 问 题 ,提交 的 表单 数 
据 合法 吗 ? 如果 提 交 的 数据 不 合法 ,那么 怎么 办 ? 其实, 使 用 JavaScript 是 一 种 十 分 便捷 
的 解决 方法 , 它 不 但 能 检查 用 户 输 入 的 无 效 或 错误 的 数据 ,还 能 检查 用 户 遗 漏 的 必 选 项 ， 
从 而 减轻 服务 器 端的 压力 ,避免 服务 器 端的 信息 无 法 更 新 或 出 现 新 错误 。 下 面 详细 解释 
为 什么 需要 表单 验证 。 


l. 避免 信息 无 法 更 新 或 出 现 新 错误 


当 我 们 在 银行 取 钱 或 存 钱 时 ,首先 需要 填写 一 个 取款 单 或 存款 单 , 填 完 之 后 ,能 直接 
取款 或 存款 吗 ? 显然 不 能 ,还 必须 通过 银行 业务 人 员 对 填写 的 单据 进行 检查 ,来 确认 填 
写 的 单据 信息 是 否 有 效 或 正确 (相当 于 JavaScript 中 的 表单 验证 ), 只 有 填写 了 正确 有 效 
的 单据 , 方 可 取款 或 存款 。 否 则 ,不 能 取款 ,其 原因 很 简单 ,不 正确 或 无 效 的 单据 将 会 产 
生 非 常 严重 的 后 果 甚 至 毁灭 性 的 打击 。 银 行 取 钱 或 存 钱 与 我 们 这 里 要 讲 的 表单 验证 一 
样 ,用 户 在 填写 表单 信息 时 ,可 能 会 无 意 或 蓄意 在 表单 中 输入 不 正确 的 数据 ,如 输入 的 数 
据 类 型 与 数据 库 中 定义 的 字段 类 型 不 一 致 ,或 者 在 不 允许 输入 空 值 的 表单 元 素 中 ,不 输 
入 任何 数据 。 这 些 都 会 造成 服务 器 端的 信息 无 法 更 新 或 出 现 莫名 其 妙 的 错误 。 为 了 避 
免 出 现 这 些 错误 ,必须 进行 表单 数据 的 验证 。 


2. 减轻 服务 器 的 压力 


有 时 ,在 用 户 填写 表单 时 .希望 所 填写 的 资料 ,必须 是 某 特定 类 型 的 信息 (如 int) ,或 
是 填 入 的 值 ,必须 在 某 个 特定 的 范围 之 内 (如 月 份 必 须 是 1 一 12) ,在 正式 提交 表单 之 前 ， 
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必须 检查 这 些 值 是 否 有 效 。 先 来 了 解 一 下 什么 是 客户 端 验 证 和 服务 器 端 验证 ,客户 端 实 
际 上 就 是 包含 在 已 下 载 的 页 面 中 , 当 用 户 提交 表单 的 时 候 , 它 直接 在 已 下 载 到 本 地 的 页 
面 中 调用 脚本 来 进行 验证 ,这 样 可 以 减少 服务 器 端的 运算 。 而 服务 器 端的 验证 则 是 将 页 
面 提交 到 服务 器 处 理 , 服 务 器 上 的 另 一 个 包含 表单 的 页 面 先 执行 对 表单 的 验证 ,然后 再 
返回 响应 结果 到 客户 端 , 这 样 的 缺点 是 每 一 次 验证 都 要 经 过 服务 器 ,不 但 消耗 时 间 较 长 ， 
而 且 会 大 大 增加 服务 器 的 负担 。 

那么 到 底 是 在 客户 端 验证 好 还 是 在 服务 器 端 验证 好 ? 下 面 先 来 看 一 个 例子 ,假如 有 
一 个 网 站 ,每 天 大 约 有 10 000 名 用 户 注 册 使 用 它 的 服务 ,如 果 用 户 填 写 的 表单 信息 都 让 
服务 器 去 检查 是 否 有 效 ,服务 器 就 得 每 天 为 10 000 名 用 户 的 表单 信息 进行 验证 ,这 样 服 
务 器 将 会 不 堪 重 负 , 其 至 会 出 现 死机 现象 。 所 以 解决 的 最 好 办 法 就 是 在 客户 端 进行 检查 
(验证 ) ,这 样 ,能 把 服务 器 端的 任务 分 给 多 个 客户 端 去 完成 ,从 而 减轻 服务 器 的 压力 ,让 
服务 器 专门 做 其 他 更 重要 的 事情 。 

基于 以 上 两 点 原因 ,需要 使 用 JavaScript 在 客户 端 对 表单 数据 进行 验证 。 接 下 来 ,就 
有 具体 了 解 表单 验证 通常 包括 哪些 内 容 。 

在 开始 编写 表单 验证 代码 之 前 ,需要 好 好 想 想 ,在 表单 验证 过 程 中 会 遇 到 哪些 需要 
我 们 控制 的 地 方 。 就 像 软 件 工程 思想 一 样 , 先 分 析 一 下 要 在 哪些 方面 进行 验证 。 其 实 ， 
表单 验证 包括 的 内 容 非常 多 ,如 验证 日 期 是 否 有 效 或 日 期 格式 是 否 正确 ,检查 表单 元 素 
是 否 为 空 ,E-mail 地 址 是 否 正确 ,验证 身份 证 号 码 , 验 证 用 户 名 和 密码 ,验证 字符 串 是 否 
以 指定 的 字符 开头 ,阻止 不 合法 的 表单 被 提交 等 。 下 面 就 以 常用 的 注册 表单 为 例 ,来 说 
明 表单 验证 通常 包括 哪些 内 容 。 

图 2. 15 所 示 是 一 个 注册 表单 ,在 此 表单 中 标注 了 常用 的 表单 验证 应 包括 哪些 内 容 ， 
还 说 明了 一 些 验证 规则 。 


淘宝 网 Tonara" 


不 能 为 空 , 且 只 Do 
能 包括 字母、 数 
| 字 和 下 刘 线 字符 
TERT 
[NE 
| 密码 不 能 为 空 并 且 最 


* 少 为 6 位 ， 
us aiii x 


H2.15 ”注册 表单 验证 包括 的 内 容 


下 面 结合 图 2. 15 所 示 表 单 ,说 明 表 单 验证 通常 包括 的 内 容 。 
CD 检查 表单 元 素 是 否 为 空 (如 登录 名 不 能 为 空 ) 。 
(2) 验证 是 否 为 数字 (如 出 生日 期 中 的 年 月 日 必须 为 数字 ) 。 
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(3) 验证 用 户 输入 的 邮件 地 址 是 否 有 效 ( 如 电子 邮件 地 址 中 必须 有 “@” 和 “. "字符 ) 。 

CD 检查 用 户 输入 的 数据 是 否 在 某 个 范围 (如 出 生日 期 中 的 月 份 必须 是 1 一 12 ,日 必 
须 为 1 一 31) 。 

(5) 验证 用 户 输入 的 信息 长 度 是 否 足 够 (输入 的 密码 必须 大 于 等 于 6 个 字符 ) 。 

(6) 检查 用 户 输入 的 出 生日 期 是 否 有 效 ( 如 出 生年 份 由 4 位 数字 组 成 ,1、3、5、7、8、 
10,12 月 份 为 31 天 ,4、6、9、11 月 份 为 30 R). 

实际 上 在 网 站 设计 或 者 B/S 结构 系统 开发 中 ,还 会 因 情况 不 同 而 遇 到 其 他 很 多 不 同 
的 问题 ,这 就 需要 我 们 自己 去 定义 一 些 规定 和 限制 。 接 下 来 ,就 以 具体 示例 来 讲述 表单 
验证 的 一 些 常用 方法 。 

K 2. 13 列 出 了 String 对 象 常 用 的 方法 。 


表 2.13 String 对 象 的 方法 


方法 名 说 明 
Index(" 子 字符 串 ", 起 始 位 置 ) | 查找 子 字符 串 的 位 置 ,这 个 位 置 是 要 查找 的 文本 出 现在 第 一 个 位 置 
charAt(index) 获取 位 于 指定 索引 位 置 的 字符 


返回 位 于 指定 索引 indexl 和 index2 之 间 的 字符 串 , 并 且 包 括 索 引 


SubstringCindexl[ ,index2]) j 2 : " " 
indexl 所 对 应 的 字符 ,不 包括 索引 index2 所 对 应 的 字符 


ToLowerCase() 将 字符 串 转换 成 小 写 


ToUpperCase() 将 字符 串 转 换 成 大 写 


下 面 是 对 E-mail 格式 进行 验证 ,主要 编写 用 于 验证 单行 文本 框 中 的 值 是 否 为 空 、 是 
fif) "org. ”符号 的 JavaScript 函数 。 


function checkEmail () { 

Var strEmail- document .myform.txtEmail .value; 

if (strEmail.length—- 0) 

{ 
alert ("电子 邮件 不 能 为 空 !"); 
return false; 

} 

if (strEmail.indexof ("@ ",0)==- 1) 

t 
alert(" 电 子 邮件 格式 不 正确 \n 2L (16 e 95 1") ; 
return false; 

} 

if (strEmail.indexOf(".",0)—- 1) 

t 
alert ("电子 邮件 格式 不 正确 \n 必 须 包 含 . 符 号 !"); 
return false; 

} 


return true; 
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} 


在 上 述 代码 片段 中 ,myform 是 单行 文本 框 所 在 表单 的 名 称 ;txtEmail 是 单行 文本 框 
的 名 称 ,value 是 单行 文本 框 的 值 ,也 就 是 用 户 在 单行 文本 框 中 输入 的 内 容 。strEmail. 
length — —0 是 检测 获得 的 单行 文本 框 的 值 (字符 串 ) 中 的 字符 个 数 是 否 为 0, 即 是 否 为 
空 。strEmail. indexOfC"(2",0) == * —1 用 来 检测 是 否 包 含 “@” 符 号 , 若 不 包含 , 则 表 
达 式 strEmail. indexOf("@",0) 返 回 值 为 一 1; 相反 , 则 返回 找到 的 位 置 。 同 理 ， 
strEmail. indexOfC". ".0) — — —1 用 来 检测 是 否 包 含 “. "符号 。 当 单 击 “ 注 册 ” 按 钮 时 , 触 
发 表单 提交 事件 (onSubmit) ,同时 调用 checkEmail O 函数 验证 E-mail 地 址 是 否 有 效 。 

编写 一 个 用 于 验证 用 户 名 非 空 并 且 不 能 是 数字 的 函数 checkUserName() ,该 函数 没 
有 参数 ,返回 值 为 true 或 false, 代 码 如 下 。 


function checkUserName () { 
var fname —document.myform.txtUser.value; 
if(fname.length !=0){ 
for (i- 0;i« fname.length;i* *)( 
var ftext - fname.substring(i,i* 1); 
if(ftext «9 || ftext »0)( 
alert(" 名 字 中 包含 数字 \n"+ "请 删除 名 字 中 的 数字 和 特殊 字符 ")， 


return false; 


I 
} 
else( 
alert (" 未 输入 用 户 名 Na" +" 请 输入 用 户 名 "); 
return false; 
) 
return true; 


) 


在 上 述 代码 片段 中 ,myform 是 表单 元 素 所 在 的 表单 的 名 称 ( 插 和 人 表单 时 设置 好 的 表 
单 名 称 ) ;txtUser 是 单行 文本 框 的 名 称 , value 是 单行 文本 框 的 值 ,也 就 是 用 户 在 单行 文 
本 框 中 输入 的 内 容 。fname. length ! — 0 是 检测 获得 单行 文本 框 的 值 (字符 串 ) 中 的 字 
符 个 数 是 否 为 0, 即 是 否 为 空 。Fname. substring(i,i 十 1) 用 来 获取 单行 文本 框 中 输入 的 
每 一 个 字符 ,例如 fname 为 字符 串 "feng", 则 fname. substring(i,i 十 1) 将 获取 字符 f 或 @ 
或 n 或 g。(ftext<9 || ftext 记 0) 表 示 获 得 的 字符 不 能 为 数字 。 

下 面 编写 一 个 用 于 验证 密码 非 空 并 且 不 能 少 于 6 位 的 函数 passCheck O ,该 函数 没 
有 参数 ,返回 值 为 true 或 false, 代 码 如 下 。 


function passCheck() { 
var userpass —document .myform.txtPassword.value; 
if(userpass —"")( 
alert ("未 输入 密码 Nn" + "请 输入 密码 ")7 
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return false; 
) 
//Check if password length is less than 6 charactor. 
if(userpass.length < 6) { 
alert ("密码 必须 多 于 或 等 于 6 个 字符 。\n"); 
return false; 
} 
return true; 


} 


文本 框 元 素 用 于 在 表单 中 输入 字 、 词 或 一 系列 数字 。 可 以 通过 将 HTML 标签 
INPUT 中 的 “TYPE” 设 为 text, 来 创建 文本 框 元 素 ,如 下 所 示 。 


< INPUT TYPE-"text" name-"tl"» 
与 文本 框 关联 的 一 些 常用 的 事件 处 理 程序 如 表 2. 14 Bron o 
表 2.14 文本 框 对 象 的 事件 处 理 程序 


nl 失去 焦点 事件 , 当 光标 离开 某 个 文本 框 时 触发 
事件 | onFocus 光标 进入 某 个 文本 杠 
文本 框 的 内 容 被 修改 , 即 发 生 了 改变 
dde focus 获得 焦点 , 即 获得 鼠标 光标 
|e 选中 文本 内 容 ,突出 显示 输入 区 域 
属性 | value 设置 或 获得 一 个 文本 框 值 局 性 的 什 


(1) onFocus 和 onBlur 事件 : 每 当 某 个 表单 元 素 变 为 当前 表单 元 素 时 ,就 会 发 生 
OnFocus 事件 。 元 素 只 有 在 拥有 焦点 时 ,才能 接收 用 户 输入 。 当 用 户 在 元 素 上 单 击 或 按 
下 Tab 或 Shift 十 Tab 键 时 ,就 会 发 生 这 种 情况 。 从 文本 框 失去 焦点 时 ,产生 onBlur 
事件 。 

(2) onChange 事 件 : onChange 事件 将 跟踪 用 户 在 文本 框 中 所 做 的 修改 。 当 用 户 单 
击 文本 框 中 进行 修改 时 ,将 激活 该 事件 。 

(3) focus() 方 法 : 设置 一 个 文本 框 获 得 焦点 , 即 文本 框 获得 鼠标 光标 。 

(4) select() 方 法 : 选中 文本 内 容 , 突 出 显示 输入 区 域 , 即 加 亮 文字 ,一 般 用 于 提示 用 
户 重新 输入 。 

(5) value 属性 : 用 以 设 定 或 获得 一 个 文本 框 值 属 性 的 值 ,对 应 HTML 文档 中 value 
的 信息 。 

介绍 完 文本 框 控 件 的 常用 属性 方法 和 事件 之 后 。 下 面 一 起 看 看 文本 框 这 些 事件 的 
综合 应 用 。 

下 面 来 着 重 分 析 如 何 单 击 文本 框 时 ,邮箱 的 提示 信息 会 自动 清除 ? 如 何在 填 错 了 电 
子 邮 件 地 址 时 , 填 错 的 信息 将 自动 被 选中 并 高 亮 显示 ? 对 于 前 一 个 问题 , 当 单 击 时 文本 
框 获得 焦点 ,所 以 要 用 到 前 面 刚 学 的 onFocus 方法 ,通过 光标 移入 文本 框 ,然后 调用 相关 
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函数 ,把 文本 框 的 值 (value) 设 为 空 即 可 。 对 于 后 一 个 问题 ,由 于 文本 框 中 填 错 的 信息 自 
动 被 选中 并 高 亮 显 示 , 说 明文 本 框 获 得 鼠标 焦点 ,所 以 要 用 到 focus() 方 法 , 填 错 的 信息 
高 亮 显示 说 明 要 使 用 文本 框 select() 方 法 来 实现 。 

经 过 上 面 的 详细 分 析 , 下 面 来 看 看 完整 的 实现 代码 ,如 示例 2. 16 所 示 。 

示例 2.16 


«HTML» 
« HEAD» 
<TITLE> 使 用 文本 框 控件 < /TITLE> 
< SCRIPT language = "javascript"» 
function checkEmail () 
t 
var strEmail- document .myform.txtEmail.value; 
if (strEmail.length-- 0) 
t 
alert ("电子 邮件 不 能 为 空 !"); 
return false; 
} 
if (strEmail.indexoOf ("8 ",0)==- 1) 
t 
alert(" 电 子 邮件 格式 不 正确 \n DAL GL Ar e RES 1m; 
document .myform.txtEmail.focus () 7 
document .myform.txtEmail.select()7 
return false; 
) 
if (strEmail.indexOf(".",0)——- 1) 
{ 
alert ("电子 邮件 格式 不 正确 \n 必须 包含 .符号 !"); 
document .myform.txtEmail.focus () 7 
document .myform.txtEmail.select (); 
return false; 
) 


return true; 


function clearText () 
t 
if (document .myform.txtEmail.value 一 "请 输入 真实 的 电子 邮箱 ,我 们 将 发 送 激 活 密码 ") 
{ 
document .myform.txtkEmail.value-"" ; 
document .myform.txtkEmail.style.color- "red"; 


< /SCRIPT> 
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< STYLE type="text/css"> 
<f 
-textBorder { 
border: lpx solid; 
font- size:15px; 


--> 
< /STYLE> 
< /HEAD> 
< FORM name= "myform" method= "post" action- "reg success.htm" onSubmit- "return checkEmail 
0" 
< P>< IMG src-"images/reg backl.jpg" width- "979" height- "195"» « /P» 
< TABLE width- "559" border- "0" align="center"> 
<TR> 
<TD> 登 录 名 : </TD> 
< TD colspan="2"> < INPUT name-"txtUserName" type="text" class-"textBorder" id=" 
txtUserName" size- "40">< /TD> 
</TR> 
<TR> 
<TD> 您 的 电子 邮件 : </TD> 
< TD colspan="2"> < INPUT name=" txtEmail" type="text" class="textBorder" id=" 
txtEmail" value= "请 输入 真实 的 电子 邮箱 ,我们 将 发 送 激活 密码 "size="40" onFocus- " 
ClearText ()" style- "color: # 666666;"» 
* 必 填 < /TD> 
</TR> 
<TR> 


<TD colspan- "3" align= "center"» « P» &nbsp; 
</P> 
<P> 
< INPUT name= "clearButton" type= "reset" id="clearButton" value=" 清空 "> 
<INPUT name= "registerButton" type="submit" id="registerButton" value=" it 
册 "> 
</P>< /TD> 
</TR> 
< /TABLE> 
< P» « IMG src= "images/bottom.jpg" width="969" height-"107" ></P> 
< P> &nbsp;« /P» 
< /FORM> 
< /HIML> 


下 拉 列 表 框 也 称 下 拉 菜 单列 表 框 。 许 多 时 候 , 在 网 站 中 提供 多 个 选项 的 最 好 方式 
是 使 用 下 拉 列 表 框 。 例 如 ,在 注册 电子 邮件 地 址 时 ,出 生日 期 等 框 通常 使 用 三 个 下 拉 列 
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KERR: 一 个 显示 年 列表 ,一 个 显示 月 列表 ,一 个 显示 日 列表 。 这 将 创造 一 个 用 户 友好 
的 环境 ,用 户 单 击 就 可 以 选 定 其 中 的 数据 ,从 而 节省 时 间 和 精力 。 

下 拉 列 表 框 使 用 二 SELECT 这 和 二 OPTION 放 两 个 标签 共同 创建 。 二 SELECT 才 标 
笃定 义 选择 列表 的 特性 ,二 OPTION 二 标签 指定 各 个 列表 项 。 

K 2.15 列 出 了 与 下 拉 菜 单 相关 的 事件 .属性 和 方法 。 

表 2.15 下 拉 列 表 框 的 常用 事件 、 属 性 和 方法 

事件 |onChange 当选 项 发 生 改变 时 产生 
value 下 拉 列 表 框 中 被 选 选 项 的 值 
所 有 的 选项 组 成 一 个 数组 ,options 表示 整个 选项 数组 ,第 一 个 选 


options 项 即 为 options[0] ,第 二 个 即 为 options[1] ,其 他 以 此 类 扒 
. | 属性 
下 拉 列 表 框 Salecedindes | 返回 被 选择 的 选项 的 索引 号 ,如 果 选 中 第 一 个 则 返回 0, 第 二 个 
| 则 返回 1, 其 他 以 此 类 推 
Length 返回 下 拉 菜 单 中 的 选项 个 数 
» 将 新 的 option X4 € new 插入 到 option 对 象 old 前 面 ,如 果 old 为 
方法 |Add(new,old) | 空 ,那么 直接 插 到 末尾 


下 面 通过 示例 实现 简单 的 省 市 级 联 菜单 。 
首先 编写 用 于 实现 省 市 两 级 联动 功能 的 JavaScript 函数 changeCity()。 


function changeCity () { 
var province- document .myform.selProvince.value; 
var newOptionl,newOption2; 
Switch (province) { 
case "四 川 省 " : 
newOptionl- new Option (" 成 都 市 ","chengdu"); 
newOption2- new Option ("泸州 市 ", "Luzhou") ; 
break; 
case "湖北 省 ": 
newOptionl- new Option ("iR X ifi ", "wuhan"); 
newOption2- new Option ("X it ri ", "xiangfan"); 
break; 
case "山东 省 " : 
newOptionl- new Option ("ff 5j ifi ", "qingdao"); 
newOption2- new Option ("烟台 市 ", "yantai"); 
break; 
} 
document .myform.selCity.options.length- 0; 
document .myform.selCity.options.add (newOptionl); 
document .myform.selCity.options.add (newOption2); 
} 


在 上 述 代码 中 ,Document. myform. selProvince. value 表示 用 来 获取 表单 中 “省 份 ” 
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下 拉 列 表 框 中 选中 选项 的 value 属性 值 ( 如 四 川 省 、 湖 北 省 或 山东 省 )。new Option 
("成 都 市 ","chengdu" ) 表 示 使 用 Option 的 构造 函数 来 创建 一 个 Option 对 象 , 其 中 参数 
“成 都 市 ”表示 在 选择 列表 中 要 显示 出 来 的 文本 ;参数 "chengdu" 表 示 当 option 被 选中 并 
且 菜 单 被 提交 时 ,返回 到 指定 服务 器 的 一 个 值 。document. myform. selCity. options. 
length —0 表示 设置 表单 中 “城市 ”下拉 列表 中 无 下 拉 选 项 , 即 没 有 下 拉 列 表 项 。 为 了 给 
下 拉 列 表 框 添加 下 拉 列 表 项 ,可 以 使 用 add() 方 法 ,如 document. myform. selCity. 
options. add(newOption1) 表 示 在 “城市 ”下 拉 列 表 框 中 添加 一 个 下 拉 选 项 。 

在 “设计 ”视图 中 单 击 “ 省 份 * 下 拉 列 表 , 然 后 切换 到 “代码 ”视图 ,将 显示 “省 份 " 下 拉 
列表 对 应 的 HTML 代码 ,添加 当下 拉 选 项 改变 时 调用 函数 changeCity() 的 代码 。 


< SELECT name= "selProvince" onChange= "changeCity () "> 
<OPTION> -- 请 选择 开户 账号 的 省 份 -- < /OPTION> 
«OPTION value= "四川 省 "> 四 川 省 < /OPTION> 
<OPTION value= "山东 省 "> 山东 省 < /OPTION> 
«OPTION value= "湖北 省 "> 湖北 省 < /OPTION> 
</SELECT> 
在 上 述 代 码 片段 中 , 先 定义 名 称 为 selProvince 的 选择 列表 , 它 有 4 个 列表 项 ,并 将 其 
onChange 事件 处 理 程序 设置 为 函数 changeCity()。 当 选项 发 生 改 变 时 ,就 调用 函数 
changeCity O ,从 而 实现 省 市 两 级 联动 功能 。 
上 述 制作 过 程 所 对 应 的 完整 代码 如 示例 2. 17 所 示 。 
示例 2. 17 


<HIML> 
< HEAD» 
<META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
«TITLE» i JJ] « /TITLE> 
< SCRIPT language- "javascript" > 
function changeCity () ( 
var province- document .myform.selProvince.value; 
var newOptionl,newOption2; 
Switch (province) ( 
case "Ju JI £i" : 
newOptionl- new Option (" 成 都 市 "， "chengdu") ; 
newOption2- new Option ("i5 JH ifj ", "1uzhou") ; 
break; 
case "湖北 省 " : 
newOptionl= new Option ("武汉 市 ", "wuhan") ; 
newOption2- new Option ("Xf ifi ", "x1angfan") ; 
break; 
case "山东 省 " : 
newOptionl- new Option ("青岛 市 ", "qingdao"); 
newOption2- new Option ("烟台 市 ","yantai"); 
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break; 
document .myform.selCity.options.length- 0; 
document .myform.selCity.options.add (newOptionl); 
document .myform.selCity.options.add (newOption2); 
) 
< /SCRIPT> 
< /HEAD> 


«BODY» 
< FORM name-"myform" action-"register success.htm" > 
< TABLE width= "472" border- "0" align="center" cellpadding- "0" cellspacing- "0"> 
<TR> 
« TD width="185" align="center"> &nbsp; &nbsp; &nbsp; &nbsp; tE% </TD> 
< TD width= "287"» « INPUT name- "txtUserName" type="text" size- "25"> < /TD> 
</TR> 
<TR> 
« TD align="center">% f} < /TD> 
< TD» < SELECT name= "selProvince" onChange- "changeCity () "> 
<OPTION> -- 请 选择 开户 账号 的 省 份 --< /OPTION> 
«OPTION value= "四川 省 "> 四 川 省 < /OPTION> 
<OPTION value=" 山 东 省 "> 山东 省 < /OPTION> 
«OPTION value= "湖北 省 "> 湖北 省 < /OPTION> 


< /SELECT» < /TD> 
</TR> 
<TR> 
<TD align="center" valign="bottom"> $ti < /TD> 
<TD> <P> 


< SELECT name= "selCity"> 
<OPTION> -- 请 选择 开户 账号 的 城市 --</OPTION> 
< /SELECT> 
</P> 
</TD> 
</TR> 
<TR> 
X TD» gnbsp;< /TD> 
< TD» &nbsp;« /TD> 
</TR> 
<TR> 
« TD colspan= "2"» « DIV align="center"> < IMG src= "images/regquick.jpg" width="114" 
height- "27" onClick- "checkForm() ">< /DIV» « /TD> 
</TR> 
<TR> 
<TD> gnbsp;< /TD> 
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< TD» gnbsp;< /TD> 
</TR> 
< /TABLE> 
< /FORM> 
< /BODY> 
« /HTML» 


在 运行 时 ,如 果 在 “省 份 ” 下 拉 列 表 框 中 选择 “四 川 省 ”, 将 会 出 现 如 图 2. 16 所 示 的 页 
面 效 果 。 在 示例 中 ,如 果 省 份 所 对 应 的 城市 比较 多 ,仍然 使 用 Option 对 象 来 创建 “城市 ” 
下 拉 框 选项 ,将 会 出 现 很 多 重复 的 宛 余 代码 ,这 个 问题 可 以 使 用 数组 得 到 很 好 地 解决 。 


图 2.16 省 市 级 联 效果 页 面 


数组 是 具有 相同 数据 类 型 的 一 个 或 多 个 值 的 集合 。 数 组 用 一 个 名 称 存储 一 系列 值 ， 
用 下 标 区 分 数组 中 的 每 个 值 。 在 JavaScript 中 ,数组 的 下 标 从 0 开始 。 

JavaScript 没有 显 式 声明 数组 数据 类 型 。 然 而 ,该 语言 有 内 置 数组 对 象 。 要 在 程序 
中 使 用 数组 ,程序 员 必须 利用 数组 对 象 及 其 关联 的 方法 。 

(1) 创建 数组 。 


var arrayObjectName - new Array (size); 


其 中 ,arrayObjectName 是 数组 (对 象 ) 的 名 称 ,new 使 用 来 创建 对 象 的 关键 字 , Array X 
示 数 组 的 关键 字 ,size 表示 arrayObjectName 可 容纳 的 元 素 总 数 ,因此 size 用 整数 来 表 
ZR. lll var array name— new Array(12); 表 示 创 建 了 一 个 名 称 为 array. name, fi 12 个 
元 素 的 数组 。 

(2) 为 数组 元 素 赋值 。 

在 创建 数组 时 ,可 以 直接 为 数组 元 素 赋值 。 


var emp; 
emp — new Array ("Ryan Dias", "Graham Browne", "David Greene"); 


也 可 以 分 别 为 数组 元 素 赋 值 。 例 如 ， 


var emp =new Array (3); 
emp[0] = "Ryan Dias"; 
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emp[1] = "Graham Browne"; 
emp[2] = "David Greene"; 


3. 访问 数组 元 素 


可 以 通过 数组 的 名 称 和 下 标 直接 访问 数组 的 元 素 ,访问 数组 的 表示 形式 为 : 数组 名 
[下 标 ]。 例 如 ,emp[0] 表 示 访 问 数组 中 第 1 个 元 素 ,emp 就 是 数组 名 ,0 表示 下 标 。 

下 面 使 用 数组 优化 省 市 级 联 效果 。 由 于 下 拉 框 索引 号 (selectedIndex) 也 是 从 0 开始 
的 ,但 是 下 拉 列 表 框 索引 号 0 对 应 选项 “-- 请 选择 开户 账号 的 省 份 一 ,1 对 应 选项 “四 川 
省 ”,2 对 应 选项 “山东 省 ”,3 对 应 选项 “湖北 省 ”。 为 了 使 用 户 选择 的 省 份 索引 号 找到 对 
应 的 数组 索引 号 ,所 以 要 把 获得 的 省 份 索引 号 减 去 1 才能 与 数组 索引 号 一 一 对 应 。 整 个 
分 析 过 程 是 : 首先 ,使 用 数组 来 存放 每 个 省 份 包含 的 城市 名 称 , 如 cityLiscLO ] f£ fitt " VU Ji 
省 ”包含 的 城市 名 称 ,cityList[1] 存 储 “ 山 东 省 ”包含 的 城市 名 称 ,citylist[2] 存 储 “ 湖 北 省 ” 
包含 的 城市 名 称 ;其 次 ,根据 用 户 在 “省 份 * 下 拉 列 表 框 中 选择 省 份 选项 所 对 应 的 省 份 索 
引号 ,如 1 对 应 四 川 省 ,2 对 应 山东 省 ,3 对 应 湖北 省 ,找到 对 应 的 数组 索引 号 (如 0、1、2); 
最 后 ,根据 对 应 的 数组 内 容 ( 如 citylistL0] 对 应 的 内 容 有 “成 都 “绵阳 ”“ 德 阳 ”“ 自 贡 ”、 
“内 江 ”“ 乐 山 ”“ 南 充 ”“ 和 雅安”“ 眉 山 *“ 甘 孜 *“ 凉 山 ” “泸州 ”) ,添加 城市 选项 到 “ 城 
市 ”下 拉 框 中 。 

同时 ,要 自 定义 一 个 JavaScript 函数 ,该 函数 的 功能 是 当 触 发 省 份 “ 第 一 级 分 类 ”下 拉 
菜单 中 的 onChange 事件 时 , 先 清空 城市 “第 二 级 分 类 "下拉 菜 单 中 的 选项 内 容 , 然 后 再 将 
省 份 对 应 城市 的 名 称 信 息 装载 到 城市 的 “第 二 级 分 类 ”下 拉 菜 单 中 。 

利用 数组 编写 用 于 实现 省 市 两 级 联动 功能 的 JavaScript 函数 changeCity()。 


function changeCity(){ 
var cityList =new Array(); 
cityList[0]=[' 成 都 '，' 绵 阳 ',' 德 阳 ',' 自 贡 ',' 内 江 ',' 乐 山 ',' 南 充 ',' 雅 安 ',' 眉 山 '， 
"Bü, slt, twn 
cityList[1]- ['UF i", "ro, "ilg, eEIEC, ARE, URAGC, HEX, CURT, UR 
"威海 "，' 日 照 ']; 
cityList[2]] = [" 武 汉 " "EB, BID S, ES, rn, UNITE, EC, EXE, 
"Bg, "ILS 
// 获 得 省 份 选项 的 索引 号 ,如 四 川 省 为 1, 比 对 应 数组 索引 号 多 1 
var pIndex- document .myform.selProvince.selectedIndex- 1; 
var newOptionl; 
document .myform.selCity.options.length- 0; 
for (var j in cityList[pIndex]) 
i 
newOptionl- new Option (cityList [pIndex] [j], cityList [pIndex] [j]); 
document .myform.selCity.options.add (newOptionl); 


82 Mss 


给 “省 份 ” 下 拉 列 表 添 加 onChange 事件 程序 ,来 实现 当下 拉 选 项 改变 时 就 调用 函数 
changeCity() 的 功能 。 

< SELECT name- "selProvince" id- "selProvince" onChange- "changeCity () "> 
<OPTION> -- 请 选择 开户 账号 的 省 份 --< /OPTION> 
«OPTION value- "四川 省 "> 四 川 省 < /OPTION> 
«OPTION value= "山东 省 "> 山东 省 < /OPTION> 
<OPTION value= "湖北 省 "> 湖北 省 < /OPTION> 

< /SELECT> 


在 上 述 代码 片段 中 , 先 定义 名 称 为 selProvince 的 选择 列表 , 它 有 4 个 列表 项 ,这 4 个 
列表 项 所 对 应 的 下 拉 框 索引 号 分 别 为 0.1.2.3, 并 将 其 onChange 事 件 处 理 程序 设置 为 函 
数 changeCity() 。 当 选项 发 生 改 变 时 ,就 调用 函数 changeCity O .从 而 实现 省 市 两 联动 
功能 。 


2.4 XJ AI fA 


1. 在 JavaScript 中 每 隔 一 秒 调用 函数 fooC ) .下面 ( ) 方 法 是 正确 的 。 


A. setInterval("fooC )".1000) B. clearIntevalC"fooC )".1000) 
C. clearTimeout("fooC )".1000) D. setTimeout("fooC )".1000) 
2. WF( ) 对 象 可 用 来 在 浏览 器 窗口 中 载 和 一 个 新 网 址 。 
A. document. url B. window. location 
C. window. url D. window. close 
3x ) 对 象 包 括 了 alert C ) 方 法 。 
A. window B. document C. location 


4. 4 Wr F Ili JavaScript 的 代码 段 : 
«FORM» < input type="text" name=" txtl" value- "txtl"» « input type="text" name- "txt2" 
value- "txt2" onFocus- alert ("我 是 焦点 ") onBlur=alert ("我 不 是 焦点 !")> 
< /FORM> 


下 面 的 说 法 正确 的 是 ( ^s 

A. 当 用 鼠标 选中 txt2 时 ,弹出 “我 是 焦点 ”消息 框 ,再 用 鼠标 选中 txtl 文本 框 时 ， 
弹出 “我 不 是 焦点 "消息 框 

B. 当 用 鼠标 选中 txtl 时 ,弹出 “我 是 焦点 ”消息 框 ,再 用 鼠标 选中 txt2 文本 框 时 ， 
弹出 “我 不 是 焦点 ”消息 框 

C. 假如 现在 输入 光标 在 txtl 上 ,用 鼠标 单 击 页 面 上 除 txt2 以 外 的 其 他 部 分 时 ， 
弹出 “我 不 是 焦点 ”消息 框 

D. 假如 现在 输入 光标 在 txt2 上 ,用 鼠标 单 击 页 面 的 其 他 部 分 时 ,弹出 “我 不 是 焦 
点 ”消息 框 

5. 在 JavaScript 中 ,文本 域 不 支持 的 事件 包括 ( Js 
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A. onBlur B. onLostFocused 
C. onFocus D. onChange 
6. 在 表单 (myform) 中 有 一 个 电话 号 码 输入 文本 框 (tel), 格式 如 : 010-82668155 ,要 
求 前 4 位 是 010-, 后 面 是 8 位 数字 。 提 交 表 单 时 ,下 面 ( ) 正 确 验证 输入 电话 号 码 的 


有 效 性 。 
A. var  str—, value; 
if str. substr(0,4)1 —"010-"|| | str. substr CA). length! —8 
|| | isNaN C(parseFloat (str. substr (4)))) 
alter (“JEZA ui 3 10s 
B. var str=myform. tel. value; 


if (str. substr(0,4)!="010-"&.&. str. substr(4). length! —8 
&.8.  isNaN (  parseFloat (str. substr (4)))) 
alter 〈" 无 效 的 电话 号 码 ") 
C. var str=myform. tel. value; 
if (str. substr(0,3) 1! —"010-"|| str. substrC3). length! —8 
ll isNaN (  parseFloat (str. substr (3)))) 
alter ("无 效 的 电话 号 码 ") 
D. var str=myform. tel. value; 
if (str. substr(O.4) 1 —"010-" | | str. substr(4). length! —8 
| | lisNaN (CparseFloat (str. substr (4)))) 
alter 〈“ 无 效 的 电话 号 码 ") 
7. ("24. 7" 十 2.3 ) 的 计算 结果 是 (  )。 


A. 27 B. 24.72.3 C. 247 2.3 D. 26.7 
8. ( ) 事 件 处 理 程序 可 用 于 在 用 户 单 击 按钮 时 执行 函数 。 

A. onSubmit B. onClick C. onChange D. onExit 
9. 用 户 更 改 表单 元 素 Select 中 的 值 时 ,就 会 调用 ( ) 事 件 处 理 程序 。 

A. onClick B. onFocus C. onMouseOver D. onChange 
10. onMouseUp 事件 处 理 程 序 表示 ( Ja 

A. 鼠标 被 释放 B. 按 下 鼠标 

C. 鼠标 离开 某 个 区 域 D. 单 击 鼠 标 


11. ID “showTime” H} DIV 标签 内 显示 时 钟 ,每 秒 刷新 一 次 ,完成 每 秒 刷 新 时 钟 的 
代码 正确 的 是 ( Jis 
A. setTimeout('showTime. innerText— new Date( ). toLocaleString( )'.1000) 
B. setTimeout C showTime. innerHTML = new Date( ). toLocaleString ( )'. 
1000) 
C. setInterval ('showTime. outerHTML = new Date( ). toLocaleString C )', 
1000) 


D. setIntervalCshow Time. innerText— new Date( ). toLocaleString( )'.1000) 
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12. 分 析 下 面 的 JavaScrip 代码 段 ,输出 的 结果 是 ( Jis 


var S1-15; 
var 


if (isNaN (sl)) 


S2= "string"; 


document .writeln 
(s2)) 


(s1); 
if | (isNaN 


document .writelh (s2); 


A. 15 B. string 


C. 15 string 


D. 不 输出 任何 信息 


13. 名 为 myform 的 表单 中 有 一 个 ID 为 email 的 文本 框 ，email 中 必须 包含 “@” 和 
“. ”字符 ,并 且 “@” 和 “. ”两 个 字符 均 不 在 第 一 位 ,定义 : var e= document. myform. 


email. value; 下 面 验证 E-mail 的 代码 正确 的 是 ( 


)。 


A. if(e.indexof("@",1)==—1 || e.indexof(".",1) 一 一 一 1){ 


alert(" 电 子 邮件 格式 不 正确 ") 


return false; ) 


B. ifCe. indexof(" (9" ,1) — — —1 &.& e. indexof("(9",1) —— — D ( 


alert(" 电 子 邮 件 格式 不 正确 ") 


return false; ) 


C. ifCe. indexofC("(9",0) — — —1 || e. indexof("(2",0) — —— Df 


alert(" 电 子 邮 件 格式 不 正确 ") 


return false; } 


D. ifCe. indexof(" (2",0) — — —1 8&8. e. indexof("(9" ,0) — — — D ( 


alert(" 电 子 邮件 格式 不 正确 ") 


return false;} 


14. 如 下 代码 片段 , 当 鼠 标 移 到 图 片上 时 ,显示 的 内 容 是 ( )。 


< IMG src- "sl.jpg" 


name- "photoshop" onMouseOver- "src= 's2.jpg'" onMouseOut= "src 


-'sl.jpg'" alt- "我 是 不 是 很 可 爱 呀 !"> 


A. sl 图 
B. s2 图 
C. sl 图 及 文字 “我 是 不 是 很 可 爱 呀 1” 
D. s2 图 及 文字 “我 是 不 是 很 可 爱 呀 1” 
15. 网 页 中 有 一 个 名 为 pre. gif 的 “后 退 ” 小 图 标 , 下面 实现 后退” 功能 正确 的 
是 ( )。 
A. <A href="javascript:history. go(—1);"> 
<IMG src= "pre. gif" width="67"></A>œ 
B. <A href="javascript:history. go(1);"> 
<IMG src= "pre. gif" width="67"></A> 
C. <A href="history. go(—1);"> 
<IMG src= "pre. gif" width="67"></A> 
D. <A href=" history. go(1);"> 
<IMG src 一 "pre. gif" width="67"></A> 
16. 分 析 下 面 的 javascript 代码 段 ,输出 结果 是 ( js 
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var  mystring- "I am a good student"; 
a-mystring.indexOf ("good"); 
document .write (a); 
A. 5 B. 6 C. 了 D. 8 
17. 已 知 页 面 上 有 一 个 名 为 “关闭 图 片 ”按钮 , 需 关闭 图 片 : <img sre— "ss. jpg"id— 
"dd" ,假设 按钮 的 onClick 事件 的 函数 是 close, 下 面 对 该 函数 的 描述 正确 的 是 ( m 
A. document. getElement. ByNameCdd?. style. display — 'none' 
B. document. getElement. ByIdCdd^. style. display — none' 
C. document. getElement. ByTag(dd). style. display— none' 
D. document. getElement. ByName('dd?. style. display — 'block' 
18. OnBlur 事件 表示 ( Ja 
A. 失去 焦点 B. 获得 焦点 C. 内 容 发 生 改 变 D. 文本 被 选中 
19. 在 打开 已 知 页 面 时 ,弹出 一 个 名 为 adv. html、 高 为 300、 宽 为 250、 显 示 工 具 栏 但 
不 显示 地 址 栏 的 弹出 窗口 ,以 下 弹出 窗口 的 代码 正 码 的 是 ( Js 
A. open("adv. html" ,"left=250,height=300 ,toolbar=0,location=1") 
B. open("adv. html" ,"","width—250.height—300.toolbar— 1 ,location=0") 


C. open("adv. html" ,"","width= 250 ,top=300 .scrollbars= 1 ,location=0") 
D. open("adv. html". "", "width —250.top—300.scrollbars— 1 ,menubar=0") 


20. 下 面 对 代 码 段 分 析 正 确 的 是 ( 
«marquee direction- "right" onMouseOver- "this.stop();" 
onMouseOut- "this.start ();" loop=100> 深 动 的 文字 
< /marquee» ; 
A. 文字 循环 向 左 深 动 100 次 ,然后 停止 
B. 文字 向 右 无 限 次 循环 滚动 ;鼠标 停 在 文字 上 时 ,文字 停止 滚动 , 移 开 时 ,继续 
滚动 
C. 文字 循环 向 右 深 动 100 次 ,鼠标 停 在 文字 上 时 ,文字 停止 滚动 , 移 开 时 ,继续 
滚动 
D. 文字 向 右 来 回 往复 滚动 ,鼠标 停 在 文字 上 时 ,文字 停止 滚动 , 移 开 时 ,继续 
滚动 
21. 编写 代码 ,要求 共 6 张 图 片 随机 显示 ,用 户 每 次 浏览 或 刷新 页 面 显示 的 图 片 不 一 
样 , 但 大 小 位 置 一 样 。 


本 章 主要 运用 HTML CSS JavaScript 相关 技术 设计 出 一 个 招聘 网 站 的 静态 页 面 。 
主要 应 用 以 下 知识 点 。 

(1) CSS 样式 表 。 

(2) DIV 的 显示 ,隐藏 : style. display、block/none。 

(3) DIV 套 表格 实现 网 页 布局 。 

(4) JavaScript 特效 。 

(5) 级 联 下 拉 列 表 框 ,动态 创建 option. 

(6) 表单 验证 。 

招聘 网 站 特效 制作 ,实现 如 下 功能 。 

OD 网 站 首页 。 

(2) 新 用 户 注 册 。 

(3) 用 户 登 录 。 

(4) 简历 管理 : 信息 填写 。 

(5) 职位 搜索 。 

(0 招聘 公司 页 面 查看 。 
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首页 为 index. html, 如 图 3. 1 所 示 。 

首页 主要 是 把 所 有 公司 信息 展示 出 来 ,主要 内 容 有 以 下 几 个 方面 。 
Q) DIV 套 表格 布局 页 面 。 

(2) 网 页 左 侧 实 现 带 关闭 按钮 、 随 滚动 条 上 下 移动 的 广告 层 。 

(3) 随机 漂浮 的 图 片 广告 。 

(4) 向 上 、 向 左 滚动 的 信息 (利用 marquee 跑马 灯 实 现 )。 

(5) 最 热 招 聘 ( 本 页 内 链接 )。 

代码 如 示例 3. 1 所 示 。 


#@: 招聘 网 站 设计 


87 
ES———8 c = ”>= 
viatemm 
NY meet RiaRSES 
x 
IIBSBIAZERSE 
. 
T&SaPEXUITSS"É — -umTeeser 
*— 品牌 公司 Featured Companies: 
IéMAawaom RZESRUSYASS SANS LO8SS GRSRASSGER RISSICREEERSS RISARSURERGOT 
t come E) Abbott E ii Ei 
now niring 
G 
古驰 〈 中 国 ) 贸易 有 限 公司 
BABB Hot Jods 
， saunaan? E 
o wxs/ma/Ac/aT 
-RGMEARNENROS —— ORYKYTMASNSEROT 
-RInMTaMesrEROT 
Dd 
和 "nur 
IRZMRGRMENROS —— ORXKRORAMNROm 人 -RIXURMa GERE ROS 
图 3.1 index. html X1 
示例 3.1 
XHTML» « !-- InstanceBegin template- "/Templates/Template.dwt" 
codeOutsideHTMLIsLocked- "false" --> 
«HEAD» 
«META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
< 1-- InstanceBeginEditable name- "doctitle" --> 
<TITLE> 我 的 招聘 网 < /TITLE> 
<LINK href- "image/style.css" type="text/css" rel- "stylesheet"» 
< SCRIPT language- "javascript"» 
function closel (){ 
document .getElementById ("mscroll") .style.display- "none"; // 隐 藏 随 滚动 条 上 


下 滚动 的 层 


function move ()í 

document. getElementById ( " mscroll"). style. pixelTop - document. body. 
scrollTop* 100; // 获 取 mscro11 层 的 上 方位 置 

document. getElementById ( " mscroll"). style. pixelLeft = document. body. 
scrollLeft* 10; // 获 取 mscro11 层 的 左 方位 置 
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} 
window.onscroll-move; // 窗 口 的 滚动 事件 , 当 页 面 滚 动 时 调用 move () PR 2C 
< /SCRIPT> 


< 1-- InstanceEndEditable --> 

< !-- InstanceBeginEditable name= "head" -->< !-- InstanceEndEditable --> 

< /HEAD> 

«BODY» 

< !-- InstanceBeginEditable name= "EditRegion3" --> 

<DIV class- "main"? 

< !-- 带 关闭 按钮 的 随和 鼠标 上 下 深 动 的 图 片 层 --> 

<DIV align="right" style= "position:absolute;left:10px; top: 100px; width: 109px; background 
- color:# CCCCC; z- index:2;" id- "mscroll"» < IMG src- "image/close.jpg"» «BR» « A href=" 
javascript:closel () ; "» X [4] « /A» « /DIV> 

<! 一 随机 漂浮 广告 开始 --> 

<DIV id= "float" style="position:absolute;z- index:3;">< IMG src="image/float .gif" width 
="80" height="52">< /DIV> 

< SCRIPT language- 'JavaScript'> 


// 定 义 全 局 变量 

var xPos =0; //X 轴 坐标 

Var yPos =0; //Y 轴 坐标 

var step -1; // 图 片 移 动 的 速度 

var yon =0; // 设 置 图 片 在 Y 轴 的 移动 方向 

var xon =0; // 设 置 图 片 在 X 轴 的 移动 方向 

var img =document .getElementById('float'); // 图 片 所 在 层 ID 

function changePos () { 

var width =document .body.clientWidth; // 浏 览 器 宽度 

var height - document .body.clientHeight; // 浏 览 器 高 度 

var Hoffset -img.offsetHeight; // 漂 浮 图 片 高 度 

var Woffset - img.offsetWidth; // 漂 浮 图 片 宽度 

img.style.left =xPos +document .body.scrollLeft; // 漂 浮 图 片 距 浏 览 器 左 侧 位 置 
img.style.top - yPos + document .body .scrollTop; // 漂 浮 图 片 距 浏览 器 顶端 位 置 

if (yon— 0) ( 

yPos - yPos + step; // 漂 浮 图 片 在 Y 轴 方向 上 向 下 移动 
jelse { 

yPos =yPos - step; // 漂 浮 图 片 在 Y 轴 方向 上 向 上 移动 


} 

if (yPos <0) { // 如 果 漂 浮 图 片 漂 到 浏览 器 顶端 时 ,设置 图 片 在 Y 轴 方向 上 向 下 移动 

yon -0; 

yPos =0; 

} 

if (yPos >= (height -Hoffset)) ( ”// 如 果 漂 浮 图 片 漂 到 浏览 器 底 端 时 ,设置 图 片 在 Y 轴 方向 上 
向 上 移动 


yon =1; 
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yPos - (height -Hoffset); 


if (xon—0) ( 
xPos —xPos + step; // 漂 浮 图 片 在 X 轴 方向 上 向 右 移动 


else [ 


xPos —-xPos - step; // 漂 浮 图 片 在 X 轴 方向 上 向 左 移动 


if (xPos <0) ( // 如 果 漂 浮 图 片 漂 到 浏览 器 左 侧 时 ,设置 图 片 在 X 轴 方向 上 向 右 移动 
xon =0; 
xPos =0; 


if (xPos >= (width -Woffset)) { // 如 果 漂 浮 图 片 漂 到 浏览 器 右 侧 时 ,设置 图 片 在 X 轴 方向 
上 向 左 移动 

xon-1; 

xPos = (width -Woffset); 

) 

setTimeout ('changePos () ', 30); // 设 置 定时 器 ,使 漂浮 图 片 不 间断 地 移动 

) 


window.onload- changePos () ; // 页 面 载 和 时 ,调用 changePos () 函 数 ,随机 漂浮 广告 
</SCRIPT> 
<!-- 头 部 开始 --> 


<DIV id- "logo"»« IMG src="image/logo.gif">< /DIV> 
<DIV id- "menu"> < A href- "login.html"» < IMG src-"image/menul- 2.gif"> </A><A href=" 
search.html">< IMG src= "image/menu2- 2.gif">< /A><A href="intro.html"><IMG src- "image/ 
menu3- 2.gif">< /A>< /DIV> 
<DIV id-"menu- bgl" style="padding- top: 2px;"> < FORM action="" method- "post" name=" 
myform"> 个 人 会 员 登 录 | 会 员 名 : gnbsp;< INPUT name= "username" type="text" class- "index- 
input"> gnbsp; &nbsp; &nbsp; &nbsp; $i fj : gnbsp;< INPUT name- "pwd" type="password" class=" 
index- input" > &nbsp; &nbsp; &nbsp; < INPUT name- "subbmit" type="submit" value=" &nbsp" 
class= "index- btn"» &nbsp; &nbsp; &nbsp; < INPUT name- "zddl" type="checkbox" value-"1"» fl 
动 登录 &nbsp; &nbsp; &nbsp; < A href= "register.html" class-"A- white"> 新 会 员 注册 </A></ 
FORM> < /DIV> 
< 上 -搜索 .图片 . 近 期 预告 --> 
<DIV style=" padding- top: 10px;" > < TABLE width=" 99&" border-" 0" cellspacing=" 0" 
cellpadding- "0" align="center"> 

« TR» « TD width= "210" « TABLE width= "100$ " border= "0" cellspacing- "0" cellpadding- 


align="center"> 

« TR align="center"> 
« TD» «A href- "company .html"»« IMG src- "image/index- 2.gif"»« /A» « /TD» 

</TR> 

<TR align="center"> 
« TD» < A href= "company.html"> < IMG src= "image/index- 3.gif" vspace= "4">< /A» « / 
TD» 
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</TR> 


« TR align="center"> 
« TD» «A href- "company .html"» « IMG src= "image/index- 4.gif" vspace- "4"» « /A» « /TD> 
</TR> 


< /TABLE> < /TD> 


< FORM action="search.html" method="post" name="search">< TD style = "background- 
image:url (image/index- bgl.gif); background- repeat: no- repeat; padding- left: 15px; 
padding- top: 40px;" width="202" height="200"> 请 输入 关键 词 : «BR» < INPUT name=" 
search- key" type="text" class= "register- input"><BR> 例 如 : 软件 工程 师 <BR> 或 项 目 
经 理 互联 网 <BR> 
<DIV align= "center" style- "width:150px;"» « INPUT name- "search- btn" type- "submit" 
value- "&nbsp;" class- "index- btnl"» « /DIV> 
« / TD» « /FORM> 
« TD» « div align- "center" > 欢迎 光 临 招聘 网 < /div> 
< DIV> < TABLE width= "100$ " border- "0" cellspacing- "0" cellpadding- "0"> 
<TR align="center"> 
« TD» <A href= "company .html1"» « IMG src= "image/index- 7.gif" id="adl">< /A» « A href=" 
company .html1"»« IMG src= "image/index- 5.gif" id- "ad2"» « /A» « A href= "company.html"» 
< IMG src- image/index- 6.gif" id- "ad3"» « /A>< /TD> 
</TR> 
<TR align="center"> 
« TD» < A href="company.html"> 深 圳 高 新 技术 人 才 专 场 招聘 会 < /A» &nbsp; &nbsp; &nbsp; 
&nbsp; * «A href= "company.html"> 近 期 预告 敬 请 关注 </a> < /TD> 
</TR> 
< SCRIPT language= "javascript"> 
var NowFrame-1; // 全 局 变量 ,轮换 显示 图 片 的 第 一 张 
var MaxFrame=3; // 全 局 变量 ,轮换 显示 图 片 的 最 大 张 数 
function adv(){ 
for (var i- l;i«-MaxFrame;i-*-*)( 
if (i==NowFrame) 
document .getElementById ('ad'4 NowFrame) .style.display="; // 目 前 显示 的 图 片 
else 
document .getElementById ('ad'+ i) .style.display= 'none'y/ 隐 藏 其 他 图 片 
) 
t 
if (NowFrame-- MaxFrame) // 设 置 下 一 张 显 示 的 图 片 
NowFrame-1; 
else 
NowFrame- NowFrame- 1; 
} 
setTimeout ('adv () *, 2000); // 设 置 定 时 器 ,显示 下 一 张 图 片 
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window.onLoad-adv(); // 当 页 面 载 人 时 ,调用 adv () FRE 
</SCRIPT> 
< /TABLE>< /DIV>< /td> 
< TD width= "210" valign="top"> < TABLE width= "204" border- "0" cellspacing- "0" cellpadding 
="0" align="center"> 
«TR» 
« TD id= "menu- bgl"style- "border:1 # ff7000 solid;border- bottom:0;">。 近 期 预告 < /TD 
» 
</TR> 
<TR> 
< TD style="padding- left: 10px; border: 1 # ff7000 solid; border- top:0;"» < MARQUEE 
height- "140" direction="up" onMouseOver- "this.stop ()" onMouseOut- "this. start ()" 
Scrollamount- "1"» - 2007 4F 9 H JG UC di 3C IT 图 解 <BR> 
"3G 售 前 技术 支持 工程 师 <BR> 
3G 测 试 工程 师 < BR> 
3G 软 件 工程 师 < BR> 
3G 系 统 工程 师 < BR> 
2007 年 9 月 无 忧 指数 IT 图 解 <BR>。， 3G 售 前 技术 支持 工程 师 <BR> 
3G 测 试 工 程 师 < BR> 
3G 软 件 工 程 师 < BR> 
3G 系 统 工程 师 < BR> 
2007 年 9 月 无 忧 指数 IT 图解 < /MARQUEE> < /TD> 


</TR> 
< /TABLE> 
</TD> 

</TR> 
< /TABLE> 
« /DIV» 
< 上 -品牌 公司 跑马 灯 --> 
« DIV» « IMG src="image/index- 1.gif">< /DIV> 
< DIV style= "padding- top: lO0px;"» < MARQUEE width- "980" height- "30" direction- 
"left" onMouseOver- "this.stop()" onMouseOut- "this.start()" scrollamount- "6"» 
< A href= 'company.html'> 武 汉 红 孩子 信息 技术 有 限 公 司 < /A> &nbsp; &nbsp; < A href= 
'company.html'> 海 南 优美 内 衣 有 限 公司 < /A» &nbsp; &nbsp; < A href= ' company. html'» 
武汉 第 三 空间 建筑 装饰 设计 工程 < /A> gnbsp; &nbsp; < A href= ' company. html ' » iÈ iX f 2 
铭 泰 汽车 销售 有 限 公 司 < /A> &nbsp; &nbsp; <A href= ' company. html ' » R I R 8 4E J^ 45 d 
限 公 司 < /A> &nbsp; &nbsp; < A href= ' company. html ' > 4E 2; Ji A fi Z; ii 95 43 RA F « /a> 
&nbsp; &nbsp; < A href= ' company.html'> 深 圳 市 爱 迪 星 电子 科技 有 限 公 司 < /A> &nbsp; 
&nbsp; < A href= 'company.html'> 伊 莎 美 尔 < /A» &nbsp; gnbsp; < A href= ' company. html ' 
> 武汉 美 苑 广告 印 务 有 限 公 司 < /A> &nbsp; &nbsp; « A href= 'company.html'» -F X X ff < /A 
> &nbsp; &nbsp; < A href= ' company. html ' > KÈ iX ii 5E 5$ 48 BE T] fe T Pe RA B] « /A» 
&nbsp; &nbsp; < A href= ' company. html ' > j& DU if ££ Æ 54 dt RA RA F « /A» &nbsp; &nbsp; 
< A href= 'company .html'> 武 汉 东 云 阁 酒店 管理 有 限 公 司 < /A» &nbsp; &nbsp; < A href= ' 
company.html'> 武 汉 市 中 创 环 亚 建 筑 景观 设计 工程 </A> &nbsp; &nbsp; < A href= ' 
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company.html'» } H [t ££ 3 di V K < /A» &nbsp; &nbsp; < A href= ' company. html ' > ìk W E 
25 < /A» &nbsp; &nbsp; < A href= ' company. html ' > ERUNER ill Jt 4) 7x 7] < /A» &nbsp; &nbsp; < A 
href= 'company.html'» i8] dC fi MV. 5; 3th 7^ A ER x E] « /A> &nbsp; &nbsp; < A href= ' company. 
html'> 华 闻 期 货 武昌 营业 部 < /A> &nbsp; &nbsp; < A href= ' company. html ' > 3k iX 4E Ji iz ij 
有 限 公 司 < /A> &nbsp; &nbsp; < A href= 'company.html'> 武 汉 百 纳 装饰 工程 有 限 公司 </a> &nbsp; 
&nbsp;« A href= 'company-html'> 星 月 门 业 < /A> &nbsp; &nbsp; « A href= 'company.html'> 四 合 园 酒 
J< /A> &nbsp; &nbsp; <A href= 'company.html'> 锐 色 力 奥 品 牌 策略 机 构 </RA> &nbsp; &nbsp; < A 
href= 'company .html'> 武 汉 凯 比 亚 电池 科技 有 限 公 司 </a> &nbsp; &nbsp;« A href= 'company.html 
"> 武汉 绍兴 老酒 饮食 有 限 公司 < /a> 
< /MARQUEE> < /DIV> 
< !-- 图 片 广告 --> 
«div» < TABLE width= "962" border= "0" cellspacing- "0" cellpadding- "0" align="center"> 
<TR align="center"> 

<TD> <A href= "company.html"» < IMG src= "image/index- adl.gif" hspace= 

border= "0">< /A>< /TD> 

< TD» «A href= "company.html">< IMG src= "image/index- ad2.gif" hspace= 


= "g" 


"2" 


border- "0">< /A» «br» « IMG src- "image/index- ad6.gif"» 
« TD» «A href- "company.html"».« IMG src- "image/index- ad4.gif" hspace- "4" vspace- "4" 
border- "0">< /A» «br» «A href- "company .htm1"» « IMG src= "image/index- ad5.gif" hspace 
= "4" vspace- "4" border- "0"» « /A» < /TD> 

</TR> 


<TR align="center"> 


<TD> <A href= "company.html"> < IMG src= "image/index- ad7.gif" hspace= -"4" 
border= "0">< /A» « BR» 

<A href-"company.html"» < IMG src-"image/index- ad8.gif" hspace- 

border- "0">< /A>< /TD> 


« TD» «A href- "company.html"» < IMG src- "image/index- ad9.gif" hspace- "4" vspace- "4" 
border= "0"»« /A»« BR» < IMG src- "image/index- adl0.gif"» 
« TD» <A href- "company .html">< IMG src- "image/index- adll.gif" hspace- "4" vspace- "4" 
border- "0"» </A> < br» < A href- "company.html"» < IMG src-"image/index- adl2.gif" 
hspace- "4" vspace- "4" border- "0"? « /A» < /TD> 
</TR> 
< /TABLE> 
</div> 
< ! 一 最 热 招 聘 --> 
« DIV» < TABLE width- "962" border- "0" cellspacing- "0" cellpadding- "0" align- "center"> 
<TR> 
« TD» « IMG src-"image/hot top.gif"»« /TD> 
</TR> 
<TR> 
< TD» < TABLE width= "100$ " border- "0" cellspacing- "0" cellpadding- "0"> 
<TR> 
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< TD style=" background- image: url (image/register- line. gif); background- repeat: 
repeat- y" width= "3">< /TD> 
< TD» < TABLE width=" 97$" border="0" cellspacing="0" cellpadding="0" align= 
"center"> 
<TR> 
< TD» < SPAN class=" index- btn2"» « A href="#hoti"> 计 算 机 /网 络 /通信 /电子 </A> 
< /SPAN» « SPAN class- "index-btn2"><R href="#hot2"> 贸 易 / 消 费 /制造 /营运 < /A> < /SPAN 
></TD> 
</TR> 
<TR> 
<TD id= "hot1"> 
<DIV class="login- bold" style="padding- top:20px; ">< IMG src="image/register- 
arrow.gif" width- "9" height="9"> 计 算 机 /网 络 / 通 信 / 电 子 < /DIV> 
<DIV> < TABLE width= "100$ " border- "0" cellspacing- "0" cellpadding- "0"> 
«TR» 
« TD style- "border- bottom:1 # cccccc dotted;" height- "25">。 武 汉 网 度 信息 科技 有 限 公 
司 < /TD> 
« TD style= "border-bottom:1 # cccccc dotted;">。 北 京东 方 中 科 集 成 科技 有 限 公司 < /TD> 


< TD style- "border-bottom:1 # cccccc dotted;"» « 深圳 市 天 音 美 讯 信息 技术 有 限 公 司 < /TD 
> 
« TD style="border- bottom:1 # cccccc dotted;">，。 武汉 天 行 健 科学 仪器 设备 有 限 公 司 < /TD 
> 

</TR> 

<TR> 

« TD style- "border- bottom:1 # cccccc dotted;" height- "25">。 武 汉 电信 系统 集成 分 公司 
</TD> 
<TD style="border- bottom:1 # cccccc dotted;">，。 武 汉 网 路 万 通 科 技 开 发 有 限 公司 < /TD> 


<TD style- "border- bottom:1 #cccccc dotted;">。 深 圳 市 天 音 美 讯 信 息 技术 有 限 公 司 < /TD 
>. 
« TD style= "border-bottom:1 # cccccc dotted;">。 武 汉 理 康 科技 有 限 公 司 < /TD> 

</TR> 

<TR> 

<TD style= "border- bottom:1 # cccccc dotted; " height= "25">“。 武 汉 红 帽 电子 娱乐 有 限 公 
司 < /TD> 
<TD style- "border-bottom:1 # cccccc dotted;">，。 武 汉 盛 铭 科 技 有 限 公 司 < /TD> 
<TD style= "border-bottom:1 # cccccc dottedj">。 武 汉 市 一 龙 电气 科技 有 限 公司 
</TD> 
<TD style= "border-bottom:1 # cccccc dotted;">。 武 汉 天 腾 通 软 科技 有 限 公司 
«/TD» 

</TR> 
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<TR> 
« TD style="border- bottom:1 # cccccc dotted; " height= "25">。 武 汉 洛 比 科技 有 限 公司 </ 
TD> 
<TD style- "border- bottoam:1 # cccccc dotted;">。 武 汉 百 捷 网 络 服 务 有 限 公 司 < /TD> 
<TD style- "border-bottom:1 # cccccc dotted;">，。 江 苏 新 科 数 字 技 术 有 限 公司 武汉 分 公司 
</TD> 
« TD style= "border-bottom:1 # cccccc dottedi">。 武 汉 市 武昌 区 徐 恒 电脑 服务 部 
</TD> 
</TR> 
<TR> 
« TD style="border- bottom:1 # cccccc dotted; " height="25">。 武 汉 网 度 信息 科技 有 限 公 
司 < /TD> 
« TD style- "border-bottom:1 #cccccc dotted;">，。 北 京东 方 中 科 集成 科技 有 限 公 司 < /TD> 


« TD style- "border- bottom:1 # cccccc dotted;">，。 深 圳 市 天 音 美 讯 信息 技术 有 限 公 司 < /TD 
> 
< TD style- "border- bottom:1 # cccccc dotted;">。 武 汉 天 行 健 科学 仪器 设备 有 限 公 司 < /TD 
> 

</TR> 

<TR> 

< TD style="border- bottom:1 # cccccc dotted; " height="25">。 武 汉 电信 系统 集成 分 公司 
«/TD» 
« TD style- "border-bottom:1 # cccccc dotted;">，。 武 汉 网 路 万 通 科 技 开 发 有 限 公 司 < /TD> 


<TD style- "border- bottom:1 #cccccc dotted;">。 深 圳 市 天 音 美 讯 信 息 技术 有 限 公 司 < /TD 
> 
« TD style- "border-bottom:1 # cccccc dotted;">，。 武 汉 理 康 科技 有 限 公 司 < /TD> 
</TR> 
<TR> 
« TD style="border- bottom:1 # cccccc dotted; " height- "25">。 武 汉 红 帽 电子 娱乐 有 限 公 
司 </TD> 
<TD style- "border- bottom:1 #cccccc dottedi">。 武 汉 盛 铬 科技 有 限 公 司 < /TD> 
<TD style- "border-bottom:1 # cccccc dotted;">。 武 汉 市 一 龙 电气 科技 有 限 公司 
</TD> 
<TD style="border- bottom:1 # cccccc dotted;">。 武 汉 天 腾 通 软 科技 有 限 公 司 < /TD> 
</TR> 
<TR> 
<TD style= "border- bottom:1 # cccccc dotted; " height= "25">“。 武 汉 洛 比 科技 有 限 公 司 
</TD> 
« TD style="border- bottam:l # cccccc dotted;">。 武 汉 百 捷 网 络 服 务 有 限 公 司 < /TD> 
<TD style- "border-bottom:l # cccccc dotted;">。 江 苏 新 科 数 字 技 术 有 限 公 司 武汉 分 公司 
</TD> 
<TD style= "border-bottom:1 # cccccc dotted;i">。 武 汉 市 武昌 区 徐 恒 电脑 服务 部 
</TD> 
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</TR> 
< /TABLE> 
</DIV> 
</TD> 
</TR> 
<TR> 
<TD id= "hot2"» « DIV class- "login- bold" style="padding- top:20px; ">< IMG src="image/ 
register- arrow.gif" width- "9" height="9"> 贸 易 / 消 费 /制造 /车 运 < /DIV> 
<DIV> < TABLE width= "100$ " border- "0" cellspacing- "0" cellpadding- "0"> 
<TR> 
« TD style="border- bottom:1 # cccccc dotted; " height="25">。 武 汉 网 度 信息 科技 有 限 公 
司 < /TD> 
« TD style- "border- bottom:1 #cccccc dotted;">，。 北 京东 方 中 科 集成 科技 有 限 公 司 < /TD> 


<TD style- "border- bottom:1 # cccccc dotted;">，。 深 圳 市 天 音 美 讯 信息 技术 有 限 公 司 < /TD 
> 
« TD style= "border-bottom:1 # cccccc dotted;">，。 武 汉 天 行 健 科学 仪器 设备 有 限 公 司 < /TD 
> 

</TR> 

<TR> 

< TD style="border- bottom:1 # cccccc dotted;" height= "25">。 武 汉 电 信 系 统 集成 分 公司 
</TD> 
<TD style- "border-bottom:1 # cccccc dotted;">，。 武 汉 网 路 万 通 科 技 开 发 有 限 公 司 < /TD> 


<TD style- "border-bottom:1 # cccccc dotted;">，。 深 圳 市 天 音 美 讯 信息 技术 有 限 公 司 < /TD 
> 
<TD style- "border-bottom:1 # cccccc dotted;">，。 武 汉 理 康 科技 有 限 公 司 < /TD> 
</TR> 
<TR> 
« TD style- "border- bottom:1 # cccccc dotted;" height- "25">。 武 汉 红 帽 电子 娱乐 有 限 公 
司 </TD> 
<TD style- "border-bottom:1 # cccccc dottedi">。 武 汉 盛 铬 科技 有 限 公 司 < /TD> 
<TD style- "border-bottom:1 # cccccc dotted; "> © 武汉 市 一 龙 电气 科技 有 限 公 司 < /TD> 
<TD style= "border-bottom:1 # cccccc dotted;">，。 武 汉 天 腾 通 软 科 技 有 限 公 司 < /TD> 
</TR> 
<TR> 
< TD style="border- bottom:1 # cccccc dotted;" height= "25">。 武 汉 洛 比 科技 有 限 公司 
</TD> 
« TD style="border- bottom:1 # cccccc dotted;">。 武 汉 百 捷 网 络 服 务 有 限 公 司 < /TD> 
<TD style- "border-bottom:1 # cccccc dotted;">。 江 苏 新 科 数 字 技 术 有 限 公 司 武汉 分 公司 
</TD> 
<TD style= "border-bottom:1 # cccccc dotted;">。 武 汉 市 武昌 区 徐 恒 电脑 服务 部 < /TD> 
</TR> 
<TR> 
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« TD style- "border-bottom:1 # cccccc dotted;" height- "25">“。 武 汉 网 度 信息 科技 有 限 公 
司 < /TD> 
« TD style- "border- bottom:1 # cccccc dotted;">，。 北 京东 方 中 科 集成 科技 有 限 公 司 < /TD> 


<TD style- "border- bottom:1 # cccccc dotted;"» * 深圳 市 天 音 美 讯 信息 技术 有 限 公 司 < /TD 
> 
<TD style- "border-bottom:1 # cccccc dotted;">，。 武 汉 天 行 健 科学 仪器 设备 有 限 公 司 < /TD 
> 

</TR> 

<TR> 

« TD style="border- bottom:1 # cccccc dotted; " height= "25">。 武 汉 电信 系统 集成 分 公司 
</TD> 
« TD style="border- bottom:1 #cccccc dotted; "> « RIA I 38 FEET RHA RA E « /TD> 


<TD style="border- bottom:1 # cccccc dotted;">，。 深 圳 市 天 音 美 讯 信 息 技术 有 限 公 司 < /TD 
» 
« TD style- "border-bottom:1 # cccccc dotted;"» « 4C DLP PHEA IR Z8] « /TD> 
</TR> 
<TR> 
< TD style= "border- bottom:1 # cccccc dotted; " height= "25">。 武 汉 红 帽 电子 娱乐 有 限 公 
司 < /TD> 
« TD style- "border-bottom:1 # cccccc dotted;">，。 武 汉 盛 铭 科 技 有 限 公 司 < /TD> 
<TD style- "border- bottom:1 # cccccc dotted;">。 武 汉 市 一 龙 电 气 科技 有 限 公 司 < /TD> 
« TD style- "border- bottom:1 # cccccc dotted;">。 武 汉 天 腾 通 软 科技 有 限 公 司 < /TD> 
</TR> 
<TR> 
« TD style="border- bottom:1 # cccccc dotted; " height- "25">。 武 汉 洛 比 科 技 有 限 公 司 
</TD> 
<TD style="border- bottom:1 # cccccc dotted;">“。 武 汉 百 捷 网 络 服务 有 限 公 司 < /TD> 
<TD style- "border-bottom:l # cccccc dotted;">。 江 苏 新 科 数 字 技 术 有 限 公 司 武汉 分 公司 
</TD> 
« TD style= "border-bottom:1 #cccccc dotted;">。 武 汉 市 武昌 区 徐 恒 电脑 服务 部 < /TD> 
</TR> 


< /TABLE> 
< /DIV» « /TD> 


</TR> 


< /TABLE> 
</TD> 


< TD style="background- image: url (image/register- line.gif); background- repeat: 
repeat- y" width= "3">< /TD> 
</TR> 


< /TABLE> 
</TD> 


</TR> 
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<TR> 
< TD» « IMG src= "image/hot down.gif">< /TD> 
</TR> 
< /TABLE> 


</DIV> 
< /DIV> 


< !-- InstanceEndEditable --> 

<DIV id="bottom- bg"class-"bottom- bg"> 网 站 导航 | <A href=" index.html" class= 
"A-white"> 网 站 首页 < /a> | <A href= "search.html" class="A- white"> 职 位 搜索 </A> | <A href 
="login.html" class- "A- white"» Myjob« /A> | <A href- "register.html" class="A-white"> 用 

户 注册 < /A> | «A href= "1ogin.html" class= "A- white"> 用 户 登录 < /A> | «A href- "intro.html" 

class- "A- white"> 简 历 管理 < /A> | <A href= "company .html" class= "A- white"> 招 聘 公 司 < /A> 
</DIV> 

<DIV id- "bottom" class- "bottom"> 人 才 招 聘 E-mail:hr8 51job.com<BR> 个 人 求职 E- mail:club 

@ 51job.com 或 垂询 :800- 820- 5100 

«BR» 

未 经 本 招聘 网 站 同意 ,不 得 转载 本 网 站 之 所 有 招聘 信息 及 作品 

«BR» 

无 忧 工作 网 版 权 所 有 &copy;1999- 2007« BR» 

<A href-"http://www.miibeian.gov.cn" target="_blank"> < IMG src-"image/bottoml.gif" 

border= 

< /BODY> 


"» « /A» « /DIV» 


< 1-- InstanceEnd --» « /HTML> 


3.2 注册 页 面 


注册 页 面 有 以 下 要 求 。 

(1) E-mail 和 会 员 名 要 求 单 击 按钮 验证 ;提示 错误 信息 及 信息 填写 正确 页 面 。 
(2) 密码 用 onBlur 离开 焦点 的 表单 提示 效果 直接 提示 。 

(3) 提交 按钮 换 为 图 片 按 钮 ,并 且 鼠 标 移 到 按钮 上 ,图片 背 景 改变 。 
注册 页 面 如 图 3. 2 所 示 。 

代码 如 示例 3. 2 所 示 。 

示例 3.2 


<HIML>< !-- InstanceBegin template- "/Templates/Template.dwt" 
codeOutsideHTMLIsLocked- "false" --> 

« HEAD» 

«META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
< 1— InstanceBeginEditable name- "doctitle" --> 


二 
ess | $ARSUPSUA. zose 
z= mase 


图 3.2 注册 页 面 


<TITLE> 用 户 注册 页 面 </TITLE> 
<LINK href- "image/style.css" type="text/css" rel- "stylesheet"> 
< !-- InstanceEndEditable --» 
< 1-- InstanceBeginEditable name= "head" --> 
< SCRIPT language- "JavaScript"» 
function $ ( pElementID ) ( 
return document.getElementById (pElementID); 
) 

< 上 -电子 邮件 地 址 验证 --> 
function chemail (email)( 
if (email.value.indexOf ('8 ',0)—- 1) { 
alert ("请 输入 正确 的 电子 邮件 地 址 "); 
email.focus(); 
return false; 
} 
else( 
window.open (" checkmail. html ",""," height = 100, width = 300, toolbar = no, menubar = no, 
Scrollbars- no, resizable- no") 
} 
} 
< !-- 会 员 名 验证 --> 
function checkuser (username) { 
var reg-/^[A-Za-z]*$ /; 
if (username .value== "")([ 

alert ("请 输入 会 员 名 "); 

username .focus (); 

return false; 


} 
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else if (username.value.length« 6) { 
alert ("会 员 名 不 能 少 于 6 位 "); 
Username.focus (); 
return false; 
} 
else if(!reg.test (username.value. charAt (0))){ 
alert ("会 员 名 必须 以 字母 开头 "); 
username.focus(); 
return false; 
} 
else{ 
window. open ( " checkuser. html ",""," height = 100, width = 300, toolbar = no, menubar- no, 
scrollbars=no, resizable- no") 
) 
) 
< ! 一 密码 验证 --> 
function checkpwd (pwd) { 
var infpwd=$ ("fpwd"); 


if (pwd.value-- "")( 

infpwd.className- "font error" // 提 示 信 息 字体 样式 

infpwd.innerHTML- "请 输入 密码 !" 

return false; 

} 

if (pwd.value.length< 6) { 

infpwd.className- "font error" 

infpwd.innerHTML- "请 输入 不 少 于 6 位 的 密码 !" 

return false; 

} 
infpwd.className = "font true"; 
infpwd.innerHTML =" 您 填写 的 密码 是 合法 的 !"; 


return true; 


function checkrpwd (pwd, rpwd) { 

var infrepwd=$ ("frepeatpwd"); 

if (rpwd.value— "")( 
infrepwd.className- "font error" 
infrepwd.innerHTMI- "请 输入 确认 密码 1" 
return false; 

} 

if (pwd.value!= rpwd.value) { 
infrepwd.className- "font error" 


infrepwd.innerHTML- "两 次 输入 的 密码 不 一 致 ,请 重新 输入 ! 
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return false; 


} 
infrepwd.className ="font true"; 
infrepwd.innerHTML = "请 牢记 您 输入 的 密码 !"; 
return true; 

} 

< /SCRIPT> 

< !-- InstanceEndEditable --> 

< /HEAD> 

«BODY» 


< 1-- InstanceBeginEditable name= "EditRegion3" --> 
<DIV class- "main"? 


<DIV id- "logo"»« IMG src= "image/logo.gif"»« /DIV» 


<DIV id- "menu"? <A href- "login.html"» < IMG src-"image/menul- l.gif"» «/A» « A href=" 
search.html"» « IMG src- "image/menu2- 2.gif"»« /A» « A href- "intro.html"» « IMG src- "image/ 
menu3- 2.gif"»« /A»« /DIV» 
<DIV id- "menu-bgl"> 我 的 简历 | 个 人 搜索 器 | 职位 收藏 夹 | 工作 申请 记录 | 退出 </DIV> 
< !-- 用 户 注册 开始 --> 
<DIV class= "register"> < TABLE width= "857" border= "0" cellspacing= 
="0"> 

<TR> 


" cellpadding 


<TD>< IMG src= 
</TR> 
<TR> 


image/register- top.gif"»« /TD> 


< TD» < TABLE width= "100% " border= "0" cellspacing- "0" cellpadding=" 
«TR» 
<TD background- "image/register- line.gif" width- "3">< /TD> 
«X TD» « FORM action= "register.html" method="post" name= "myform"> 
< TABLE width=" 760" border-" 0" cellspacing-" 0" cellpadding-" 0" align= 
"center"? 
<TR> 
< TD class="register- bold"> 会 员 信息 : < IMG src="image/dot_line_1.gif" align=" 
absmiddle"> < /TD> 
</TR> 
<TR> 
< TD» « TABLE width= "96% " border- "0" cellspacing- "0" cellpadding- "0" align= 
"center" 
<TR> 
« TD width= "15"> < IMG src= "image/register- arrow.gif"»« /TD» 
<TD class= "register- td">E-mail: </TD> 
< TD width= "180"> < INPUT name= "email" type="text" class= "register- input">< / 
TD> 
< TD» < INPUT name= "check1" type="button" value=" "class="register- check" onClick=" 


#@: 招聘 网 站 设计 


101 


chemail (email) "> gnbsp;&nbsp; 请 填写 常用 电子 邮件 < /TD> 
« /TR» 
<TR><TD width- "30"» « IMG src= "image/register- arrow.gif"»« /TD> 
<TD class- "register- td"» Zt &nbsp; A &nbsp; 4A: </TD> 
« TD» < INPUT name= "username" type="text" class- "register- input"» « /TD> 
< TD» < INPUT name- "check?" type- "button" value=" "class: 
= "checkuser (username) "> &nbsp; gnbsp; 会 员 名 须 以 字母 开头 ,至 少 6 位 </TD> 
</TR> 
<TR><TD width= "30"» « IMG src= "image/register- arrow.gif">< /TD> 
<TD class="register- td"> 密 gnbsp; &nbsp; gnbsp;&nbsp; 码 : < /TD> 


onClick 


< TD» < INPUT name=" psw" type=" password" class =" register - input" onBlur = 
"checkpwd (psw) "> < /TD> 
<TD><DIV id- "fpwd"> 密 码 设置 至 少 6 位 < /DIV» </TD> 
</TR> 
« TR>< TD width= "30"» « IMG src= "image/register- arrow.gif">< /TD> 
« TD class= "register-td"> 重 复 密 码 : </TD> 
< TD> < INPUT name-"repeatpsw" type="password" class=" register- input" onBlur-" 
checkrpwd (psw, repeatpsw) ">< /TD> 
« TD» « DIV id- "frepeatpwd"»« /DIV» « /TD> 
</TR> 
< /TABLE> 
</TD> 
</TR> 
<TR> 
< TD» « DIV class= "register- bold"» « IMG src= "image/dot line 2.gif" align= "absmiddle" 
>< /DIV> 
<DIV align="center"> < INPUT name- "Bl" type="submit" value- "&nbsp;" onMouseOut- " 
this.className- 'register- over'" onMouseOver- "this.className- 'register- out'" class 
—"register- over"»« /DIV» « /TD> 
</TR> 
< /TABLE> < /FORM> 


</TD> 
< TD background- "image/register- line.gif" width="3">< /TD> 
</TR> 
< /TABLE> 
</TD> 
</TR> 
<TR> 
« TD» < IMG src= "image/register-bottom.gif">< /TD> 
</TR> 
< /TABLE> 
</DIV> 
</DIV> 
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< !-- InstanceEndEditable —» 
<DIV id-"bottom- bg"class="bottom- bg"> 网 站 导航 | « A href-" index.html" class- 
"A-white"> 网 站 首页 < /A> | <A href- "search.html" class="A- white"> 职 位 搜索 < /A> | «A href 
—-"login.html" class- "A- white">Myjob< /A> | <A href- "register.html" class= "A-white"> 用 
户 注册 < /a> | «A href- "1ogin.html" class- "A-white"» JH P XE 3&« /A> | <A href- "intro.html" 
class- "A- white"> 简 历 管理 < /A» | <A href- "company.html" class- "A- white"> 招 聘 公 司 < /A> 
</DIV> 
< DIV id- "bottom" class- "bottom"> 人 才 招 聘 E-mail:hre 51job.com<BR> 个 人 求职 E-mail:club 
&51job.com 或 垂询 :800- 820- 5100 
<BR> 
未 经 本 招聘 网 站 同意 ,不 得 转载 本 网 站 之 所 有 招聘 信息 及 作品 
<BR> 
无 忧 工作 网 版 权 所 有 &copy;1999- 2007<BR> 
<A href-"http://www.miibeian.gov.cn" target="_blank"> < IMG src-"image/bottoml.gif" 
border- "0'»« /A» « /DIV> 
< /BODY» 
< 1-- InstanceEnd --» « /HTML> 


3.3 4 5 TI TH 


登录 页 面 有 以 下 要 求 。 

CD 用 户 名 和 密码 用 JS 验证 是 否 为 空 。 

(2) 提交 按钮 换 为 图 片 按钮 ,并 且 鼠 标 移 到 按钮 上 ,图 片 背景 改变 。 
登录 页 面 如 图 3. 3 所 示 。 
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图 3.3 登录 页 面 
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代码 如 示例 3. 3 所 示 。 
示例 3.3 


<HIML>< !-- InstanceBegin template- "/Templates/Template.dwt" 
codeOutsideHTMLIsLocked- "false" --> 

< HEAD» 

«META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
< 1— InstanceBeginEditable name- "doctitle" --> 

<TITLE> 用 户 登 录 页 面 < /TITLE> 

<LINK href- "image/style.css" type="text/css" rel="stylesheet"> 
< !-- InstanceEndEditable --> 

<!-- InstanceBeginEditable name- "head" --> 

< SCRIPT language- "javascript"» 

function check () { 

var user- document .myform.username; 

var pwd- document .myform.pwd; 

if (user.value-- "")( 

alert ("请 输入 会 员 名 !"); 

user.focus(); 

return false; 


) 


if (pwd.value-- "")( 

alert ("请 输入 密码 1") ; 

pwd.focus(); 

return false; 

) 

return true; 

) 

< /SCRIPT» 

< !-- InstanceEndEditable --> 

< /HEAD> 

<BODY> 

< 1— InstanceBeginEditable name= "EditRegion3" --> 
<DIV class- "main"? 

<DIV id- "logo"»« IMG src- "image/logo.gif"»« /DIV> 


<DIV id- "menu"? < A href-"login.html"» < IMG src-"image/menul- l.gif"» </A><A href=" 
search.html"» < IMG src- "image/menu2- 2.gif"»« /A><A href- "intro.html"» « IMG src- "image/ 


menu3- 2.gif"»« /A» « /DIV> 


<DIV id= "menu-bgl"> 我 的 简历 | 个 人 搜索 器 | 职位 收藏 夹 | 工作 申请 记录 | 退出 </DIV> 


<DIV class- "register"» « TABLE width- "100$ " border= "0" cellspacing- 
$e 


<TR><!-- 用 户 登录 --> 


" cellpadding: 


104 4. «22552 


< TD width-"40&" align="right"> < TABLE width-" 324" border-"0" cellspacing- 
cellpadding- "0"» 

<TR> 
<TD><IMG src-"image/Login top.gif">< /TD> 

</TR> 

<TR> 
< TD» < TABLE width= "100% " border= "0" cellspacing- "0" cellpadding= "0"> 

<TR> 


< TD width="21">< IMG src="image/Login left.gif">< /TD> 
X TD bgcolor= "#FFFFF7" align="center" valign="middle" > 
< FORM action- "intro.html" method- "post" name- "myform" onSubmit- "return check 
0o" 
< TABLE width- "96$ " border- "0" cellspacing- "0" cellpadding- "0"> 
<TR> 
<TD class- "register-td"> 会 员 名 : </TD> 
< TD» « INPUT name= "username" type="text" class- "register- input"» « /TD> 
</TR> 
<TR> 
<TD class= "register-td"> 密 &nbsp; &nbsp; %9 : « /TD» 
< TD» < INPUT name= "pwd" type- "password" class- "register- input"» < /TD> 
</TR> 
<TR> 
< TD colspan- "2" align="center" height= "50" « INPUT name= "bl" type="submit" value=" 
登录 " onMouseOut= "this.className- ' login- over'" onMouseOver- "this.className- 'login 
-out'" class- "login- over"></TD> 
</TR><TR> 
<TD colspan- "2" align="center" height="50"><A href- "register.html"» < IMG src=" 
image/login- 1.gif">< /A»« /TD» 
</TR> 
< /TABLE> 
< /FORM> 
</TD> 
« TD width="21">< IMG src-"image/Login right.gif">< /TD> 
</TR> 
< /TABLE> 
</TD> 
</TR> 
<TR> 
« TD align= "center">< IMG src- "image/Login bottom.gif">< /TD> 
</TR> 
< /TABLE> < /TD» < !-- 右 侧 --> 
< TD» « TABLE width= "100% " border= "0" cellspacing- "0" cellpadding= "0"> 
<TR> 


< TD width= "100" align= "center"> < IMG src= "image/picl.jpg" vspace= "10"> 
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< /TD> 
<TD><SPAN class= "login-bold"> 我 的 简历 < /SPAN» <BR> 


51job 的 简历 中 心 , 您 可 以 在 此 创建 自己 专业 的 个 性 化 的 简历 。< /TD> 


</TR> 
<TR> 
<TD align= "center"» « IMG src- "image/pic2.jpg" vspace="5">< /TD> 
< TD» « SPAN class- "login- bold" jk T. fF « /SPAN» <BR> 
Ted iE Up ünfapd T fF? 5150b 的 职位 搜索 器 助 您 一 臂 之 力 !< /TD> 
</TR> 
<TR> 
<TD align= "center"»« IMG src= "image/pic3.jpg" vspace= "5">< /TD> 
« TD» « SPAN class= "login-bold"> 在 线 申请 < /SPAN> < BR» 
当 您 找到 感 兴趣 的 职位 时 ,可 以 立即 将 您 在 51job 上 的 简历 在 线 <BR> 
投递 给 招聘 单位 。< /TD> 
</TR> 
<TR> 
< TD align="center"> « IMG src= "image/pic4.jpg" vspace= "5">< /TD> 
« TD» < SPAN class= "login-bold"> 我 的 搜索 和 订阅 < /SPAN> <BR> 
设置 并 订阅 您 个 性 化 的 职位 搜索 器 ,51jcb 会 贴心 地 将 理想 的 职 <BR> 
位 发 送 到 您 的 信箱 中 。< /TD> 
</TR> 
< /TABLE> 
</TD> 
</TR> 
< /TABLE> 
</DIV> 
« /DIV» 
< !-- InstanceEndEditable --> 


<DIV id-"bottom- bg"class-"bottom- bg"> 网 站 导航 | <A href=" index.html" class= 
"A-white"> 网 站 首页 < /A> | «A href- "search.html" class- "a- white"> 职 位 搜索 < /a> | «A href 
-"login.html" class= "A- white"» Myjob« /A> | <A href- "register.html" class= "A- white"> 用 
户 注册 < /a> | «A href- "1ogin.html" class-"A- white"> 用 户 登 录 < /A> | <A href- "intro.html" 
class- "A- white"> 简 历 管理 < /A» | <A href- "company .html" class- "A- white" $4 HB 7s F] « /A> 


</DIV> 


<DIV id= "bottom" class= "bottom"> 人 才 招 聘 E-mail:hre 51job.com<BR> 个 人 求职 E-mail:club 


&51job.com 或 垂询 :800- 820- 5100 

<BR> 

未 经 本 招聘 网 站 同意 ,不 得 转载 本 网 站 之 所 有 招聘 信息 及 作品 
<BR> 


无 忧 工作 网 版 权 所 有 &copy; 1999- 2007<BR> 


<A href- "http://www.miibeian.gov.cn" target-" blank"> < IMG src="image/bottoml. gif" 


border= "0"»« /A>< /DIV> 
< /BODY» 
< 1— InstanceEnd -->< /HTML» 
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3.4 简历 管理 页 面 


简历 管理 页 面 有 以 下 要 求 。 

(1) 基本 个 人 信息 、 简 历 填 写 、 附 加 信息 的 注册 。 
(2) 用 onBlur 直接 验证 表单 内 容 。 

(3) 居住 地 用 级 联 下 拉 列 表 框 。 

简历 管理 页 面 如 图 3.4 所 示 。 
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图 3.4 简历 管理 页 面 
代码 如 示例 3.4 所 示 。 
示例 3.4 
< HTML» < !-- InstanceBegin template- "/Templates/Template. dwt" 


codeOutsideHTMLIsLocked- "false" --» 

« HEAD» 

< META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
< !-- InstanceBeginEditable name= "doctitle" 一 一 > 

< TITLE» fiij Jj E H< /TITLE> 

< LINK href= "image/style.css" type= "text/css" rel= "stylesheet"» 


< STYLE type= "text/css"> 
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input{border:1 #CCCCCC solid; } 


< /STYLE> 
< !-- InstanceEndEditable --» 
< !-- InstanceBeginEditable name= "head" --> 


< SCRIPT language- "javascript"» 
function  SetIDType() 
{ if (document.myform.Nation.value == "中 国 大 陆 ") 
document.myform.CardType.options[0].selected = true; 
else 
document.myform.CardType.options[1].selected - true; 
) 
function check()( 
<!-- 姓 名 检测 --> 
if(document.myform.username.value- 
alert ("请 填写 你 的 姓名 !") 


document.myform.username.focus(); 


return false; 
} 
< !-- 工 作 年 限 检查 --> 


if(document.myform.WorkYear.value-- 0) { 
alert(" 请 选择 工作 年 限 !") 
document.myform.WorkYear.focus(); 
return false; 


) 


< !-- 证 件 号 码 检查 --> 
if (document . myform. ardNumber. value 
alert ("请 填写 证 件 号 码 !") 


document.myform.CardNumber.focus(); 


mm) 


return false; 


) 


<!-- 居 住地 检查 --> 
if(document.myform.selProvince.value-- "")( 
alert(" 请 选择 居住 地 !") 
document.myform.selProvince.focus(); 

return false; 


) 


< !-- 手 机 号 码 检查 --> 
if(document.myform.tel.value-- "")( 
alert ("请 填写 您 的 联系 方式 !") 


document.myform.tel.focus(); 
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return false; 

} 

< !-- E- mail $ # --> 

if (document .myform. email.value=="") { 
alert ("请 填写 您 的 E- mai1!") 
document.myform.email.focus(); 

return false; 

) 

if(document.myform.email.value.indexOf ("8 ",0)--- 1)( 
alert(" 您 填写 E- mail 不 正确 ,请 重新 填写 !") 
document.myform.email.focus(); 

return false; 


) 


< !-- 教 育 经 历 检查 --> 
if(document.myform.edu.value-- "")( 
alert ("请 填写 教育 经 历 !") 
document.myform.edu.focus(); 

return false; 


) 


<!-- 求 职 意向 检查 --> 
if(document.myform.introself.value-- "")( 
alert ("请 填写 求职 意向 !") 
document.myform.introself.focus(); 

return false; 

) 

return true; 


} 


< /SCRIPT> 

< !-- InstanceEndEditable --» 

< /HEAD> 

« BODY» 

< !-- InstanceBeginEditable name= "EditRegion3" --» 


<DIV class- "main"> 

< DIV id= "logo"» < IMG src= "image/logo.gif"» < /DIV> 
< DIV id= "menu"» < A href= "login.html"» < IMG src= "image/menul- 2.gif"» « /A» « A 
href =" search. html" > < IMG src =" image/menu2 - 2. gif" > </A> < A href = 
"intro.html"» < IMG src= "image/menu3- l.gif"» < /A> < /DIV> 

« DIV id- "menu- bgl"> 简 历 中 心 1 求职 信 | 简历 指导 < /DIV> 

<!-- 简 历 管 理 开 始 --> 

<DIV> < TABLE width="920" border="0" cellspacing- "0" cellpadding- 


"center"» 


<TR> 
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<TD class="intro- left" valign= "top"> 
<DIV> < IMG src- "image/intro- left1.gif">< /DIV> 
<DIV class- "intro- 11">< IMG src= "image/register-arrow.gif"> 我 的 简历 < /DIV> 
<DIV> < IMG src= "image/intro- left2.gif">< /DIV> 
< DIV class =" intro- 12"» < IMG src=" image/intro - l. gif" vspace-"4" align= 
"absmiddle"» «A href= 叶 base"> 基 本 个 人 信息 < /A> <BR> 
< IMG src= "image/intro- 1.gif" vspace- "4" align= "absmiddle"><A href- "4 jianli"» T. fF £t Jy « /A 
><BR> 
< IMG src= "image/intro-1.gif" vspace- "4" align- "absmiddle"» <A href="#jianli"> 教 育 经 历 < /A 
><BR> 
< IMG src= "image/intro- 1.gif" vspace- "4" align- "absmiddle"><A href- "4 jianlin> 培 训 经历 < /A 
><BR> 
« IMG src= "image/intro-1.gif" vspace- "4" align- "absmiddle"> 语 言 能 力 <BR> 
'absmiddle"» «A href- "4 jianli"» R IP 3 [8] / Fl 


< IMG src- "image/intro- l.gif" vspace- "4" align= 
我 评价 < /A> <BR> 
< IMG src= "image/intro-1.gif" vspace- "4" align- "absmiddle"> 附 加 信息 <BR> 
< IMG src="image/intro- 1.gif" vspace- "4" align="absmiddle"> 证 书 <BR> 
< IMG src= "image/intro-1.gif" vspace- "4" align= "absmiddle"> 附 件 < /DIV> 
« DIV» « IMG src- "image/intro- left3.gif">< /DIV> 
<DIV class- "intro- 12"» « IMG src- "image/intro- l.gif" vspace- "4" align= "absmiddle" 
><A href- "#gaoji"> 高 级 人 才 附 加 信息 < /A><BR> 
< IMG src= "image/intro-1.gif" vspace- "4" align= "absmiddle"» «A href- "#gaoji">IT 技 能 </ 
A><BR> 
< IMG src= "image/intro-1.gif" vspace= "4" align- "absmiddle"><A href="#gaoji"> 项 目 经 验 
</A>< /DIV> 
</TD> 
<TD valign="top" class- "intro- right" id- "base"><DIV class- "intro- 11">< IMG src=" 
image/register- arrow.gif"> 基 本 个 人 信息 (* 为 必 填 项 )< /DIV> 
< DIV» < TABLE width= "100$ " border= "0" cellspacing- "0" cellpadding- "0"> 
<TR height- "1"» 
<TD width= "100$ " bgColor- "# dddddd"» < /TD>< /TR> 
<TR height- "1"» 
« TD width-"100$ " bgColor= "# eeeeee"» « /TD» « /TR> 
« TR height- "3"» 
« TD width-"100$ " bgColor- "f£ f7f7f]"» < /TD>< /TR> 
« TR height- "8"» 
« TD width-"100$ " bgColor- "# ffffff"» « /TD» « /TR> 
< /TABLE> 
</DIV> 
<! 一 简历 注册 开始 --> 
<DIV> < FORM action- "intro.html" method= "post" name- "myform" onSubmit- "return check ()" 
> 
< TABLE width= "99$ " border- "0" cellspacing- "0" cellpadding- "0" align="right"> 
<TR> 
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« TD width- "80" height- "30"»« SPAN class- "yellow"> * < /SPAN» tE% < /TD> 

« TD width- "300"» « INPUT name= "username" type- "text">< /TD> 

« TD width- "80"» « SPAN class- "yellow"» * < /SPAN» Ë 9| « /TD> 

< TD» < INPUT name= "sex" type= "radio" value="! " checked style= "border:0;" 

> 9j &nbsp; < INPUT name= "sex" type= "radio" value- "A" style= "border:0;"» 

Xp < /TD> 

</TR> 
<TR> 
« TD height="30">< SPAN class= "yellow"> * < /SPAN> 出 生日 期 < /TD> 
<TD> < SELECT name= "BirthYear"» <OPTION value- 1997 
selected» 1997 « /OPTION» < OPTION value= 1996» 1996« /OPTION> 
« OPTION 

value- 1995» 1995« /OPTION> < OPTION value= 1994» 1994 < /OPTION» 
« OPTION 
value= 1993» 1993« /OPTION» < OPTION value= 1992» 1992 < /OPTION» 
« OPTION 
value- 1991» 1991« /OPTION> < OPTION value= 1990» 1990 < /OPTION» 
« OPTION 
value- 1989» 1989« /OPTION> < OPTION value= 1988» 1988 < /OPTION» 
« OPTION 
value- 1987» 1987« /OPTION> < OPTION value= 1986» 1986 < /OPTION» 
« OPTION 
value- 1985» 1985« /OPTION> < OPTION value= 1984» 1984 < /OPTION» 
« OPTION 
value= 1983» 1983« /OPTION> < OPTION value= 1982» 1982 < /OPTION» 
« OPTION 
value- 1981» 1981« /OPTION» < OPTION value= 1980» 1980 < /OPTION» 
« OPTION 
value- 1979» 1979« /OPTION> < OPTION value= 1978» 1978 < /OPTION» 
« OPTION 
value- 1977» 1977« /OPTION> < OPTION value= 1976» 1976 < /OPTION» 
« OPTION 
value- 1975» 1975« /OPTION> < OPTION value= 1974» 1974 < /OPTION» 
« OPTION 
value= 1973» 1973« /OPTION> < OPTION value= 1972» 1972 < /OPTION» 
« OPTION 
value= 1971» 1971« /OPTION> < OPTION value= 1970» 1970 < /OPTION» 
« OPTION 
value= 1969» 1969« /OPTION> < OPTION value= 1968» 1968 < /OPTION» 
« OPTION 
value= 1967» 1967« /OPTION> < OPTION value= 1966» 1966 < /OPTION» 
« OPTION 
value= 1965» 1965« /OPTION> < OPTION value= 1964» 1964 < /OPTION» 
« OPTION 
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value= 1963> 1963< /OPTION> < OPTION value= 1962> 1962 < /OPTION> 
< OPTION 

value= 1961> 1961< /OPTION> < OPTION value= 1960> 1960 < /OPTION> 
< OPTION 

value- 1959» 1959< /OPTION> < OPTION value- 1958» 1958 < /OPTION> 
« OPTION 

value- 1957» 1957« /OPTION> < OPTION value- 1956» 1956 < /OPTION> 
« OPTION 

value- 1955» 1955« /OPTION> < OPTION value= 1954» 1954 < /OPTION» 
« OPTION 

value= 1953» 1953« /OPTION> < OPTION value= 1952» 1952 < /OPTION» 
« OPTION 

value- 1951» 1951« /OPTION> < OPTION value= 1950» 1950 < /OPTION» 
« OPTION 

value- 1949» 1949« /OPTION> < OPTION value= 1948» 1948 < /OPTION» 
« OPTION 

value- 1947» 1947« /OPTION> < OPTION value= 1946» 1946 < /OPTION» 
« OPTION 

value- 1945» 1945« /OPTION> < OPTION value= 1944» 1944 < /OPTION» 
« OPTION 

value= 1943» 1943« /OPTION> < OPTION value= 1942» 1942 < /OPTION» 
« OPTION 

value- 1941» 1941« /OPTION> < OPTION value= 1940» 1940 < /OPTION» 
« OPTION 

value- 1939» 1939« /OPTION> < OPTION value= 1938» 1938 < /OPTION» 
« OPTION 

value= 1937 > 1937 < /OPTION > < /SELECT > 年 < SELECT name =" 
BirthMonth"» 

< OPTION value- 1 selected»? 1 < /OPTION> < OPTION 

value- 2» 2< /OPTION» < OPTION value- 3» 3 < /OPTION> < OPTION 

value= 4» 4< /OPTION» < OPTION value= 5» 5 < /OPTION> < OPTION 

value- 6» 6« /OPTION> < OPTION value- 7» 7 < /OPTION> < OPTION 

value- 8» 8« /OPTION> < OPTION value- 9» 9 < /OPTION> < OPTION 
value- 10» 10« /OPTION> < OPTION value- 11» 11 < /OPTION> < OPTION 
value= 12» 12« /OPTION» < /SELECT> 月 < SELECT name= "BirthDay"» 
< OPTION value- 1 selected» 1 < /OPTION> < OPTION 

value= 2» 2< /OPTION> < OPTION value= 3» 3 < /OPTION» < OPTION 
value= 4» 4< /OPTION> < OPTION value= 5» 5 < /OPTION» < OPTION 
value- 6» 6< /OPTION> < OPTION value- 7» 7 < /OPTION> < OPTION 
value- 8» 8< /OPTION> < OPTION value- 9» 9 < /OPTION> < OPTION 
value= 10» 10« /OPTION» < OPTION value= 11» 11 < /OPTION> < OPTION 
value- 12» 12« /OPTION> < OPTION value- 13» 13 < /OPTION> < OPTION 
value- 14» 14« /OPTION> < OPTION value- 15» 15 < /OPTION> < OPTION 
value- 16» 16« /OPTION> < OPTION value- 17» 17 < /OPTION> < OPTION 
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value= 18» 18« /OPTION> < OPTION value= 19» 19 < /OPTION» < OPTION 
value= 20» 20« /OPTION» < OPTION value= 21» 21 < /OPTION> < OPTION 
value= 22» 22« /OPTION» < OPTION value= 23» 23 < /OPTION» < OPTION 
value= 24» 24« /OPTION» < OPTION value= 25» 25 < /OPTION» < OPTION 
value- 26» 26« /OPTION» « OPTION value- 27» 27 « /OPTION» « OPTION 
value- 28» 28« /OPTION> < OPTION value- 29» 29 < /OPTION> < OPTION 
value= 30» 30« /OPTION» < OPTION value= 31» 31« /OPTION» < /SELECT> 
H < /TD> 


< TD> < SPAN class= "yellow"> * < /SPAN> 工作 年 限 < /TD> 


< TD> < SELECT style= "width: 110px" name= "WorkYear"> < OPTION 


< /TR> 
< TR> 


value= "0" selected» -- 请 选择 -- < /OPTION> < OPTION 

value= "在 读 学 生 "> 在 读 学 生 < /OPTION> < OPTION value= "应 届 毕 业 
生 "> 应 届 毕 业 生 < /OPTION» < OPTION 

value= "一 年 以 上 "> 一 年 以 上 < /OPTION» < OPTION value- "二 年 以 上 " 
> 二 年 以 上 < /OPTION» < OPTION 

value= "三 年 以 上 "> 三 年 以 上 < /OPTION> < OPTION value= "四 年 以 上 " 
> 五 年 以 上 < /OPTION> < OPTION 

value=" 八 年 以 上 "> 八 年 以 上 < /OPTION> < OPTION value= "十 年 以 上 " 
> 十 年 以 上 < /OPTION> < /SELECT> < /TD> 


<TDheight="30"> 国 家 或 地 区 < /TD> 
< TD> < SELECT style= "WIDTH: 130px" 


onchange- "javascript: SetIDType ()" name= "Nation"> < OPTION 


value= "中 国 大 陆 " selected» 中国 大 陆 < /OPTION» < OPTION 

value= "中 国 香 港 "> 中 国 香港 < /OPTION> < OPTION value= "中 国 澳门 " 
> 中 国 澳门 < /OPTION> < OPTION 

value= "中 国 台 湾 "> 中 国 台 湾 < /OPTION» < OPTION value= "非洲 "> 非 
洲 < /OPTION> < OPTION 

value- "加 拿 大 "> 加 拿 大 </oPTION> < OPTION value=" Kk H "> Kk 
< /OPTION» < OPTION 

value= "法 国 "> 法 国 </oPTION> < OPTION value=" 德 国 " > 德国 
< /OPTION» < OPTION 
value- "日 本 "> 日 本 </oPTION> < OPTION value=" $ Hj "> 3b H 
« /OPTION» « OPTION 

value- "北美 "> 北美 </oPTION> < OPTION value- "新 加 坡 "> 新 加 坡 
« /OPTION» « OPTION 

东南 亚 "> 东 南亚 </oPTION> < OPTION value= "南美 "> 南美 
< /OPTION> < OPTION 

value= "英国 "> 英国 </OPTION> < OPTION value=" 美 国 "> 美国 
< /OPTION> < OPTION 

value= "西亚 "> 西亚 </OPTION> < OPTION value=" 其 他 "> 其 他 
< /OPTION» < /SELECT> < /TD> 


value- 


< TD» &nbsp; &nbsp; 户 &nbsp; &nbsp; &nbsp; &nbsp; O < /TD> 
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< TD» < SELECT style= "WIDTH: 110px" name= HuKou> < OPTION 
value= 00 selected> 请 选择 < /OPTION> < OPTION value= "北京 "> 北京 


< /TR> 
< TR» 


< /OPTION> < OPTION 
value- "上海 "> 上 海 </oPTION> < 
< /OPTION> < OPTION 
value- "重庆 "> 重庆 </oPTION> < 
< /OPTION» < OPTION 
value= "浙江 "> 浙江 < /OPTION» < 
< /OPTION» < OPTION 
value= "海南 "> 海南 </oPTION> < 
< /OPTION» < OPTION 
value= "山东 "> 山东 </oPTION > < 
< /OPTION> < OPTION 
value= "四 川 "> 四 川 </oPTION> < 
< /OPTION> < OPTION 
value= "河北 "> 河北 </oPTION> < 
< /OPTION» < OPTION 
value= "湖北 "> 湖北 </oPTION> < 
< /OPTION> < OPTION 
value= "陕西 "> 陕西 </oPTION> < 
< /OPTION» < OPTION 


value- "黑龙 江 " > 黑龙江 < /oPTION> 


< /OPTION> < OPTION 

value= "吉林 "> 吉林 </oPTION> < 
< /OPTION> < OPTION 

value- "云南 "> 云南 </OPTION> < 
< /OPTION> < OPTION 

value= "甘肃 "> HF 3 < /oPTION» < 
< /OPTION» < OPTION 

value= "宁夏 "> F E « /OPTION» < 
« /OPTION» « OPTION 

value= " jf JH " > d S < /OPTION» < 
< /OPTION> < OPTION 

value- "香港 "> 香港 </OPTION> < 
< /OPTION> < OPTION 

value- "台湾 "> 台湾 </oPTION> < 
< /OPTION> < /SELECT> < /TD> 


OPTION 


OPTION 


OPTION 


OPTION 


OPTION 


OPTION 


OPTION 


OPTION 


OPTION 


value=" X iE "» X ik 


value=" iT. 9j " > 江苏 


value= "广东 "> 广东 


value=" H Æ "> H Æ 


value- "江西 "> 江西 


value= "安徽 "> 安徽 


value=" 河 南 "> 河 南 


value=" W W "> W W 


value= "山西 "> 山西 


< OPTION value- "辽宁 "> 辽宁 


OPTION 


OPTION 


OPTION 


OPTION 


OPTION 


OPTION 


OPTION 


value=" J“ fü "> J" p 
value=" jt M "> 9t AN 
value=" W X "» p 
value= "西藏 "> 西藏 
value=" W W "> 青海 


value=" BR |)» 澳门 


value=" 国 外 "> 国外 


< TD height= "30"» < SPAN class= "yellow"» * < /SPAN> 证 件 类 型 < /TD> 
< TD» < SELECT style- "WIDTH: 130px" name- "CardType"» < OPTION 
value= "身份 证 "” selected» 身份 证 < /OPTION» < OPTION value= "护照 " 


> 护照 < /OPTION> < OPTION 


value= "军人 证 "> 军人 证 < /OPTION> < OPTION value= "香港 身份 证 "> 
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香港 身份 证 < /OPTION» < OPTION 
value= "其 他 "> 其 他 < /OPTION> < /SELECT> < /TD> 


< TD» < SPAN class= "yellow"» * < /SPAN» 证 &nbsp; fF snbsp; 号 < /TD> 


< TD> < INPUT name- "CardNumber" type- "text"» < /TD> 


< /TR» 
< TR» 


< TD height= "30"» &nbsp; snbsp; 目 前 年 薪 < /TD> 
< TD> < SELECT style- "WIDTH: 130px" name- "Salary"> 


< OPTION value= 0 selected» -- 请 输入 --< /OPTION» < OPTION 

value- "2 万 以 下 ">2 万 以 下 < /OPTION> < OPTION value- "2-4 3 H "» 2 
^ 3 Jj < /OPTION> < OPTION 

value- "3~ 4 Jj "» 3- 4 Jj < /OPTION» < OPTION value- "4« 5 Jj "» 4^ 5 
万 < /OPTION» < OPTION 

value- "5~6 万 ">5~6 万 </OPTION> < OPTION value="6~7 万 ">6~8 
Jj < /OPTION» < OPTION 

value- "8^ 10 Jj "» 8~ 10 Jj < /OPTION» < OPTION value- "10« 15 万 "> 
10-4 15 万 < /OPTION» < OPTION 

value= "15^ 30 Jj "» 15~ 30 万 < /OPTION» < OPTION value- "304 50 万 " 
» 30^ 50 万 < /OPTION» < OPTION 

value- "50^ 100 万 "> 50~ 100 万 < /OPTION» < OPTION 


value= "100 H LJ E "» 100 万 以 上 < /oPTION» < /SELECT> /年 < /TD> 


< TD» &nbsp; &nbsp; if] &nbsp; &nbsp; &nbsp; &nbsp; 种 < /TD> 
< TD» < SELECT style= "WIDTH: 80px" name= "CurrType"» < OPTION 


< /TR> 
« TR» 


value=" Å Ri ifi " selected» A Ki ifi < /OPTION> < OPTION value= "if ifi " 
> 港币 < /OPTION» < OPTION 

value- "美元 "> 美元 </oPTION> < OPTION value=" 日 元 "> 日 元 
< /OPTION» < OPTION 

value= "欧元 "> 欧元 </OPTION> < OPTION value=" 其 他 "> 其 他 
< /OPTION> < /SELECT> < /TD> 


< TD height= "30"» < SPAN class= "yellow"» * < /SPAN> 现 居住 地 < /TD> 


< TD colspan= "3"> 


< SELECT name= "selProvince" id- "selProvince" onChange- "changeCity ()" 


style= "WIDTH: 130px"» 


< OPTION» -- 3E f£ 4$ b) - - < /OPTION» 


< /SELECT> 


< SELECT name= "selCity" id- "selCity" style- "WIDTH: 130px"» 


< TR» 


< OPTION» -- jk ff b ili -- < /OPTION» < /SELECT> 
< /TD> < /TR> 


< TD height= "30"> < SPAN class= "yellow"» * < /SPAN» 联系 方式 < /TD> 


< TD» < INPUT class= textstyle style= "WIDTH: 160px" name= "tel"> < /TD> 


< TD» < SPAN class= "yellow"» * < /SPAN» E- mail< /TD> 
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< TD» < INPUT name= "email" type- "text">< /TD> 
< /TR> 
< TR» < TD height= "30"> &nbsp; &nbsp; Jil Jil. < /TD> 
< TD» < INPUT name= "address" type= "text" size- "35"» < /TD> 
< TD» &nbsp; snbsp; 邮 编 < /TD> 
< TD> < INPUT name= "ZipCode" type= "text" size- "5"> < /TD> 
< /TR> 
< TR» < TD height= "30"> &nbsp; &nbsp; 个 人 主页 < /TD> 
< TD colspan= "3"> < INPUT name= "homepage" type= "text" size- "35"> < /TD> 
< /TR> 
<TR> < TD colspan= "4" id= "jianli"» < DIV class= "intro- 11"> < IMG src= "image/ 
register- arrow.gif"» jt (fJ fij Jj < /DIV> 
< DIV> < TABLE width= "100$ " border= "0" cellspacing- "0" cellpadding- "0"> 
< TR height= "1"» 
< TD width= "100% " bgColor- "# dddddd"» < /TD> < /TR> 
< TR height= "1"> 
< TD width= "100% " bgColor= "# eeeeee"> < /TD> < /TR> 
< TR height= "3"> 
< TD width= "100% " bgColor- "£ f7f7f7">< /TD> < /TR> 
< TR height= "8"> 
< TD width= "100% " bgColor- "£ ffffff"> < /TD> < /TR> 
< /TABLE> 
< /DIV> < /TD> < /TR> 
< TR» < TD height= "60"> &nbsp; gnbsp; 工 作 经 验 < /TD> 
< TD colspan= "3"> < TEXTAREA name- "Cwork" cols- "60" rows= "3"> < /TEXTAREA> < /TD> 
</TR> 
« TR» « TD height= "60"» « SPAN class= "yellow"> * < /SPAN> 教 育 经 历 < /TD> 
< TD colspan= "3"» < TEXTAREA name= "edu" cols- "60" rows- "3"» « /TEXTAREA» < /TD> 
</TR> 
< TR» « TD height= "60"> gnbsp; &nbsp; 培 训 经 历 < /TD> 
<TD colspan= "3"> < TEXTAREA name- "train" cols- "60" rows="3"> < /TEXIAREA>< /TD> 
</TR> 
« TR» « TD height= "60"» « SPAN class- "yellow"» * < /SPAN> 求 职 意 向 < /TD> 
< TD colspan= "3"> < TEXTAREA name= "introself" cols- "60" rows- "3">< /TEXTAREA» < /TD> 
</TR> 
« TR» « TD colspan="4" id="gaoji">< DIV class- "intro- 11"> < IMG src- "image/register- 
arrow.gif"» 人 才 附 加 信息 </DIV> 
«DIV»? < TABLE width- "100$ " border- "0" cellspacing- "0" cellpadding- "0"> 
« TR height- "1"> 
< TD width= "100% " bgColor- "# dddddd"» < /TD>< /TR> 
<TR height- "1"» 
< TD width-"100$ " bgColor- "# eeeeee"» « /TD>< /TR> 
« TR height- "3"> 
« TD width-"100$ " bgColor- "f£ £7f7f7">< /TD» « /TR> 
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<TR height= "8"> 
« TD width= "100% " bgColor="# ffffff">< /TD» « /TR> 
< /TABLE> 
< /DIV» « /TD>< /TR> 
< TR» « TD height= "60"> &nbsp; gnbsp; 附 加 信息 < /TD> 
X TD colspan= "3"> < TEXTAREA name= "otheredit" cols- "60" rows- "3"» « /TEXTAREA» < /TD> 
</TR> 
< TR» « TD height= "60"> &nbsp; &nbsp; IT 1X fë < /TD> 
« TD colspan= "3"> < TEXTAREA name= "ITedit" cols- "60" rows="3">< /TEXTAREA» < /TD> 
</TR> 
« TR» « TD height= "60"> &nbsp; gnbsp; 项 目 经 验 < /TD> 
< TD colspan= "3">< TEXTAREA name= "project" cols="60" rows="3">< /TEXTAREA> < /TD> 
</TR> 
<TR><TD colspan= "4">< HR size="2" color="# ff7000" width="96%" align="center"> < /TD 
>< /TR> 
< TR» < TD colspan-"4" height="40" align="center"> < INPUT name- "bl" type= "submit" 
value= "保存 " class="login- over">< /TD» < /TR> 
< /TABLE> 
< /FORM> 
« /DIV» 


</TD> 
</TR> 

< /TABLE> 
< /DIV> 
<SCRIPT language- "javascript"> 
var cityList =new Array (); 

cityList[' 北 京 市 '] = [' 北 京 市 ', ' 朝 阳 区 ', ' 东 城区 ',' 西 城区 '，' 海 淀 区 ', ERE, 
丰台 区 ', RAE IERI BM) 
cityList[' 上 海 市 '] = [' 上 海 市 ', ' 宝 山区 ', "长 宁 区 ',' 直 贤 区 ',，' 虹 口 区 ', ' 黄 浦 区 '， 
' 青 浦 区 ',' 南 汇 区 ', ' 徐 汇 区 ', "卢湾 区 ']; 
cityList[' 广 东 省 '] =[' 广 东 省 ', "广州 市 "惠州 市 "汕头 市 "珠海 市 "佛山 市 ， 
"中 山 市 "东莞 市 ']; 
cityList "深圳 市 '] =[' 深 圳 市 ', "福田 区 '，' 罗 湖区 ',' 盐 田 区 '，' 宝 安 区 '，' 龙 岗 区 '， 
' 南 山区 ',' 深 圳 周边 ']; 
cityList[' 重 庆 市 '] =[' 重 庆 市 ', ' 俞 中 区 ',' 南 岸 区 ',，' 江 北 区 ',，' 沙 坪 坝 区 '，' 九 龙 坡 区 
',' 渝 北 区 ',' 大 渡口 区 ',，' 北 矿区"]; 
cityList[' 天 津 市 '] =[' 天 津 市 ', BOE TCU, ' 河 西区 ',' 南 开 区 ', ' 河 北 区 ',' 河 东区 ',' 红 
桥 区 '，" 塘 沽 区 '，"' 开 发 区 ']; 
cityList[" 江 苏 省 "] = [" 江 苏 省 …， ' 南 京 市 ', ' 苏 州 市 ', "无锡 市 ']， 
cityList[' 浙 江 省 '] =[' 浙 江 省 ', "杭州 市 "宁波 市 "温州 市 "] 
cityList[" 四 川 省 '] =[' 四 川 省 ", "成 都 市 ']; 
cityList[' 海 南 省 '] =[' 海 南 省 ', ' 海 口 市 ']; 
cityList[' 福 建 省 "] =[' 福 建 省 ', "福州 市 ', ' 厦 门市 ', "泉州 市 ', "漳州 市 ']; 
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cityList[' 山 东 省 '] = [" 山 东 省 … ' 济 南 市 ', ' 青 岛 市 ', "烟台 市 ']; 
cityList[' 江 西 省 '] =[' 江 西 省 ', ' 南 昌 市 ']; 
cityList[' 广 西 '] =[' 广 西 ', ' 南 宁 市 ']; 
cityList[" 安 徽 省 '] =[' 安 徽 省 ', "合肥 市 ']; 
cityList[' 河 北 省 '] =[' 河 北 省 ', "石家庄 市 ']; 
cityList[' 河 南 省 '] = [' 河 南 省 ', ' 郑 州 市 ']; 
cityList[" 湖 北 省 '] = [' 湖 北 省 "', ' 武 汉 市 ',' 宜 昌 市 ']; 
cityList[" 湖 南 省 '] = [' 湖 南 省 ', IR De 
cityList[" 陕 西 省 "] =[' 陕 西 省 ', "西安 市 ']; 
cityList[" 山 西 省 '] = [' 山 西 省 ', ' 太 原市 ']; 
cityList[' 黑 龙 江 省 '] =[' 黑 龙 江 省 ', "哈尔滨 市 ']; 
cityList[' 国 外 '] =[' 国 外 ']; 

cityList[' 其 他 '] =[' 其 他 ']; 


function changeCity() 
{ 
Var province= document .myform. selProvince.value; 
document .myform.selCity.options.length- 0; 
for (var i in cityList) 
{ 
if (i ==province) 
{ 
for (var j in cityList[i]) 


{ 


document .myform.selCity.options.add (new Option (cityList [i] [j], cityList 


[0D]))7 


) 
document .myform.selCity.options.selctIndex- 0; 


function AllCity()( 
for (var i in cityList) 
t 
document .myform.selProvince.options.add (new Option (i, i)); 


} 


document .myform.selProvince.selectedIndex =0; 


window.onLoad- AllCity (); 
< /SCRIPT- 
</DIV> 
< 1-- InstanceEndEditable --> 
<DIV id-"bottom- bg"class-"bottom- bg"> 网 站 导航 | <A href=" index 


. htm" 


class= 
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"A-white"> 网 站 首页 < /A> | <A href= "search.html" class- "A- white"> 职 位 搜索 < /A> | <A href 

-"login.html" class="A- white"> Myjob< /A» | <A href- "register.html" class= "A- white"> 用 

户 注册 < /A> | «A href="login.html" class= "A-white"> 用 户 登录 < /A> | <A href="intro.html" 

class= "A- white"> 简 历 管 理 < /A> | <A href- "company.html" class="A-white"> 招 聘 公司 < /A> 
</DIV> 

<DIV id= "bottom" class- "bottom"> 人 才 招 聘 E-mail:hre 51job.com<BR> 个 人 求职 E-mail:club 

8$51job.com 或 垂询 :800- 820- 5100 

<BR> 

未 经 本 招聘 网 站 同意 ,不 得 转载 本 网 站 之 所 有 招聘 信息 及 作品 

<BR> 

无 忧 工作 网 版 权 所 有 copy; 1999- 2007<BR> 

<A href-"http://www.miibeian.gov.cn" target="_blank"> < IMG src-"image/bottoml.gif" 

border- "0"»« /A>< /DIV> 

< /BODY» 

< 1-- InstanceEnd --» « /HTML> 


3.5 职 伍 搜索 页 面 


职位 搜索 页 面 如 图 3.5 所 示 。 


ARRE Advance Search 


3.5 职位 搜索 页 面 


页 面 要 求 如 下 。 

(1) DIV 套 表格 布局 。 

(2) 单 击 工作 地 点 弹出 选择 层 ,选中 的 地 点 直接 显示 在 按钮 上 。 

(3) 职能 类 别 /行业 类 别 : 和 工作 地 点 选择 一 样 ,可 以 用 复 选 框 进行 多 项 选择 ,选中 
的 项 显示 在 下 面 的 单元 格 内 。 
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代码 如 示例 3.5 所 示 。 


示例 3.5 

< HTML» < !-- InstanceBegin template- " /Templates/Template.dwt" 
codeOutsideHTMLIsLocked- "false" --> 

< HEAD» 

< META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
< !-- InstanceBeginEditable name= "doctitle" --» 


« TITLE» 人 才 招 聘 一 一 搜索 < /TITLE> 

< LINK href= "image/style.css" type= "text/css" rel= "stylesheet"> 
< !-- InstanceEndEditable 一 一 > 

< !-- InstanceBeginEditable name= "head" --» 

< SCRIPT language- "javascript"» 

function workshow (div) { 

document.getElementById(div) .style.display- 'block'; 

hide(); // 隐 藏 下 拉 框 
) 


function workclose (div) { 

document.getElementById(div) .style.display- 'none'; 

hshow() ; // 显 示 下 拉 框 
) 


function show (area) { 

document.getElementById('workarea').value- area; // 选 择 地 点 显示 在 按钮 上 
document.getElementById('worksearch').style.display- 'none';  //3k FEJZ 
hshow() ; // 显 示 下 拉 框 

} 


function trainshow (box, showid, closediv) ( 
var ss-""; 
var tt, n- 0; 


var nn = document.all.item(box); 


for (j=0; j«nn.length; j++) ( 


if (document.all.item(box, j).checked) ( // 复 选 框 被 选中 
n=n+1; 
tt = document.all.item(box, j) .valuet ""; // 选 中 复 选 框 的 值 
if(n--1) ( 
ss-tt; 
) 
else ( 


ss= ss + "<BR> "ttt; 
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) 
document .getElementById (showid).innerHTML- ss; // 所 选 内 容 显 示 在 ID 为 showid 单 元 格 
document.getElementById(closediv).style.display- 'none'; ”// 隐 藏 行业 选择 层 
hshow () 7 // 显 示 下 拉 框 
} 


function hide (){ // 隐 藏 下 拉 框 
document .getElementById ('issuedate') .style.display- 'none'; 
document .getElementById ('workyear') .style.display- 'none'; 
document .getElementById ('salary').style.display- 'none'; 
document .getElementById ('cotype') .style.display- 'none'; 
document .getElementById ('xueli').style.display- 'none'; 
document .getElementById (' jobterm').style.display- 'none'; 


) 

function hshow () { // 显 示 下 拉 框 
document .getElementById ('issuedate') .style.display= 'block'; 
document .getElementById ('workyear').style.display- 'block'; 
document .getElementById ('salary').style.display- 'block'; 
document .getElementById ('cotype').style.display- 'block'; 
document.getElementById ('xueli').style.display- 'block'; 
document .getElementById('jobterm').style.display- 'block'; 


) 

« /SCRIPT» 

< !-- InstanceEndEditable --» 

< /HEAD> 

<BODY> 

< !-- InstanceBeginEditable name- "EditRegion3" --> 
<DIV class- "main"> 

<DIV id- "logo"» «IMG src- "image/logo.gif"»« /DIV> 
<DIV id- "menu"» « A href-"login.html"» < IMG src= "image/menul- 2.gif"» «/A» « A href=" 
search.html"»« IMG src- "image/menu2- l.gif"» </A><A href-"intro.html"» < IMG src=" 
image/menu3- 2.gif"» « /A» « /DIV> 

<DIV id= "menu-bgl"> 高 级 搜索 | 关键 字 搜索 </DIV> 

< 上 -搜索 开始 一 > 

<DIV class= "register"» < TABLE width= "660" border- "0" cellspacing- "0" cellpadding- " 


align="center"> 
<TR> 
< TD>< IMG src-"image/search top.gif">< /TD> 
</TR> 
<TR> 
< TD» < TABLE width= "100% " border="0" cellspacing- "0" cellpadding- "0"> 
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<TR> 
<TD width- "3" background- "image/register- line.gif"></TD> 
«TD» 
< TABLE width=" 96$" border-" 0" cellspacing-" 0" cellpadding- "0" align= 
"center"? 

< FORM action= "search.html" method= "post" name= "myform"» « TR» 
«'ID class= "intro- 11"» « IMG src= "image/register- arrow.gif"> 关 键 字 搜索 </TD> 

</TR> 

<TR> 
< TD class= "search- left" > < INPUT name= "search" type- "text" class= "search 
- key" > &nbsp; &nbsp; < INPUT type= "botton" name= "workarea" id- "workarea" 
value= "工作 地 点 "onclick= "workshow ( ' worksearch' ) ;" class= "searcharea"> 

< /A> < /TD> 

</TR> 

<TR> 
<TD class= "intro- 11">< IMG src- "image/register- arrow.gif"> 更 多 精确 搜索 条 件 < /TD 
» 

</TR> 

<TR> 
< TD» < TABLE width= "100% " border- "0" cellspacing- "0" cellpadding- "0"> 

<TR> 
< TD width=" 50%" class=" search- left" > 职能 类 别 < A href=" javascript: 
workshow ( ' train ');" > < IMG src=" image/search - choice. gif" align=" 
absmiddle"> < /A> < /TD> 
<TD class= "search- left"> 行 业 类 别 « A hre£- "javascript:workshow('jobtype');"» « IMG src 
-"jmage/search- choice.gif" align- "absmiddle"»« /A» « /TD» 

< /TR» « TR» 
<TD id- "trainid" style=" padding- left:100px;" valign- "top">< /TD» 
<TD id= "jobid" style=" padding- left:100px;" valign- "top"? « /TD> 

</TR> 

< /TABLE> 
</TD> 

« /TR» « TR» 
« TD height- "10"»« /TD> 

</TR> 

<TR> 
<TD align- "right"» « TABLE width- "94$ " border= "0" cellspacing- 
x 


<TR> 
« TD height= "25"» A ff H Hj « /TD» « TD» « SELECT name= "issuedate" class- "search- 
select"» 
<OPTION value= "0"» — iif 3k f$ — < /OPTION» 
«OPTION value- "jft — X "> ift — X « /OPTION> 
«OPTION value=" 近 二 天 "> 近 二 天 < /OPTION> 
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<OPTION value=" 近 三 天 "> 近 三 天 < /OPTION> 
<OPTION value=" 近 一 周 "> 近 一 周 < /OPTION> 
<OPTION value= "ìt W Ji] "> Wt PI Jä] < /OPTION> 
<OPTION value= "ìf — H "> ìf — H < /OPTION> 
«OPTION value= " 近 六 周 "> 近 六 周 < /OPTION> 
«OPTION value= " 近 两 月 "> 近 两 月 < /OPTION> 

« /SELECT» « /TD» 


<TD> 工 作 年 限 < /TD» « TD» « SELECT name= "workyear" class- "search- select"» 


</TR> 
<TR> 


<OPTION value= '0'» — ifj i FE — < /OPTION> 
<OPTION value= ' 在 读 学 生 '> 在 读 学 生 < /OPTION> 


«OPTION value= ' 应 届 毕 业 生 '> 应 届 毕 业 生 < /OPTION> 


«OPTION value= ' 一 年 以 上 '> 一 年 以 上 < /OPTION> 
«OPTION value= ' 二 年 以 上 '> 二 年 以 上 < /OPTION> 
«OPTION value= ' 三 年 以 上 '> 三 年 以 上 < /OPTION> 
«OPTION value= ' 五 年 以 上 '> 五 年 以 上 < /OPTION> 
«OPTION value= ' 八 年 以 上 "> 八 年 以 上 < /OPTION> 


«OPTION value- ' 十 年 以 上 '> 十 年 以 上 < /OPTION> 


</SELECT>< /TD> 
<TD> 月 薪 范 围 < /TD><TD><SELECT name= "salary" class- "search- select"> 


«OPTION value= ''» -- 请 选择 --< /OPTION> 

<OPTION value= ' 面 议 "> 面议 < /OPTION» 

«OPTION value= '1500 以 下 '» 1500 以 下 < /OPTION> 
<OPTION value= '1500- 1999'» 1500- 1999« /OPTION» 
< OPTION value= '2000- 2999'» 2000- 2999« /OPTION» 
< OPTION value= '3000- 4499'» 3000- 4499« /OPTION» 
< OPTION value= '4500- 5999'» 4500- 5999« /OPTION» 
< OPTION value= '6000- 7999'» 6000- 7999« /OPTION» 
«OPTION value- '8000- 9999'> 8000- 9999« /OPTION» 


«OPTION value= '10000- 14999'» 10000- 14999« /OPTION» 

< OPTION value= '15000- 19999'» 15000- 19999« /OPTION» 

< OPTION value= '20000- 29999'» 20000- 29999« /OPTION» 

<OPTION value= '30000- 49999'» 30000- 49999« /OPTION» 

«OPTION value= '50000 及 以 上 '» 50000 及 以 上 < /OPTION» 
« /SELECT» « /TD> 


<TD height= "25"> 公 司 性 质 < /TD» < TD» « SELECT name= "cotype" 


> 


class= "search- select" 


«OPTION value= '0'» -- 请 选择 -- < /OPTION> 

«OPTION value= ' 外 资 欧美 ) "> 外 资 (欧美 )< /oPTION> 
«OPTION value= ' 外 资 非 欧 美 ) "> 外 资 ( 非 欧美 )< /OPTION> 
«OPTION value= ' 合 资 欧美 ) "> 合资 欧美 )< /OPTION> 
«OPTION value= ' 合 资 ( 非 欧美 ) "> 合资 非 欧美 )< /OPTION> 
«OPTION value= ' 国 企 / 上 市 公司 "> 国企 人 上 市 公司 </OPTION> 


#@: 招聘 网 站 设计 


123 


«OPTION value= ' 民 营 / 私 车 公司 '> 民 营 / 私 营 公 司 < /OPTION> 
«OPTION value= ' 外 企 代表 处 '> 外 企 代表 处 < /oPTION> 
«OPTION value= ' 其 他 性 质 '> 其 他 性 质 < /OPTION> 
</SELECT>< /TD> 
<TD> 学 历 要 求 < /TD>< TD>< SELECT name= "xueli" class= "search- select"> 
«OPTION value= '0'» — iff i FE — < /OPTION> 
X OPTION value= ' 无 "> 无 </OPTION> 
«OPTION value= ' 初 中 '> 初 中 < /OPTION> 
«OPTION value= "高 中 '> 高 中 < /OPTION> 
<OPTION value= ' 中 技 "> 中 技 < /OPTION> 
«OPTION value= ' 中 专 "> 中 专 < /OPTION> 
«OPTION value- ' 大 专 '> 大 专 < /OPTION> 
«OPTION value= ' 本 科 '> 本 科 < /OPTION> 
<OPTION value= ' 硕 士 "> 硕士 < /OPTION> 
«OPTION value= ' 博 士 '> 博 士 < /OPTION> 
«OPTION value= ' 其 他 '> 其 他 < /OPTION> 
«OPTION value= ' 不 限 '> 不 限 < /OPTION> 
< /SELECT» < /TD> 
<TD> 工 作 类 型 < /TD» « TD» « SELECT name= "jobterm" class="search- select"> 
«OPTION value= '0'» -- iff 3t ff — < /OPTION> 
<OPTION value= ' 全 职 '> 全 职 < /OPTION> 
«OPTION value= ' 兼 职 '> 兼 职 < /OPTION> 
< /SELECT> < /TD> 
</TR> 
< /TABLE> < /TD> 
</TR> 
<TR> 
<TD height= "10">< /TD> 
</TR> 
<TR> 


<TD align="center" height="35"> < INPUT name="B1" type="submit" value= "&nbsp;" 


class="btn- search">< /TD> 
< /TR> < /FORM> 
< /TABLE> 
</TD> 
<TD width= "3" background- "image/register- line.gif">< /TD> 
</TR> 
< /TABLE> 
</TD> 
</TR> 
<TR> 
< TD>< IMG src-"image/search bottom.gif">< /TD> 
</TR> 
< /TABLE> < /DIV> 
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<!-- 工 作 地 点 层 设置 一 > 
<DIV class= "search- top" id- "worksearch"> 
<DIV class= "search-menu"><TRBIE width= "100$ " border= "0" cellspacing- "0" cellpadding 
="0"> 
<TR> 
< TD» « IMG src="image/orangearrow.gif">< SPAN class="white"> 请 选择 工作 地 点 < /SPAN 
></TD> 
<TD align= "right"» «A href- "javascript:workclose ('worksearch')" class="A- white"> 
DX 闭 ]</a> &nbsp;« /TD> 
</TR> 
< /TABLE> < /DIV> 
< DIV> < TABLE width= "100% " border= "0" cellspacing- "0" cellpadding- "0"> 
<TR align="center"> 
« TD» « A href= "javascript :show (' AL 38 ili ') "> d zi ili < /A> « /TD> 
« TD» « A href="javascript:show(' 上 海 市 ')"> 上 海 市 < /A>< /TD> 
«TD» «A href="javascript:show(' 广 东 省 ')"> 广 东 省 < /A>< /TD> 
<TD><A href="javascript:show(' 深 圳 市 ')"> 深 圳 市 < /A>< /TD> 
<TD><A href="javascript:show(' 天 津 市 ')"> 天 津 市 < /a>< /TD> 
<TD><A href="javascript:show(' 重 庆 市 ')"> 重 庆 市 < /A>< /TD> 
</TR> 
<TR align="center"> 
<TD> <A href- "javascript :show (' T 2 4$ ') "> 1.3) $4 </A> </TD> 
« TD» « A href- "javascript :show (' ft [L4 ') "> MILA « /A» « /TD> 
« TD» « A href- "javascript show ('P JI| 44 ') "> JU JI| 4$ < /A» « /TD> 
« TD» « A href- "javascript show (if jj 44 ' ) "> iE 4$ « /A>< /TD> 
« TD» « A href- "javascript:show (Ii ££ 44 ') "> di Et 4$ « /A>< /TD> 
« TD» « A href- "javascript :show ('U RK ') ">I RK « /A» « /TD> 
</TR> 
<TR align="center"> 
< TD» « A href="javascript:show(' 江 西 省 ')"> 江 西 省 < /A>< /TD> 
« TD» « A href="javascript:show(' 广 西 ')"> 广 西 </A>< /TD> 
<TD><A href="javascript:show(' 安 徽 省 ')"> 安 徽 省 < /A>< /TD> 
<TD><A href="javascript:show(' 河 北 省 ')"> 河 北 省 < /A>< /TD> 
<TD><A href="javascript:show(' 河 南 省 ')"> 河 南 省 < /A» « /TD> 
<TD><A href- "javascript :show ("湖北 省 ')"> 湖 北 省 < /A> < /TD> 
</TR> 
<TR align- "center" 
« TD» « A href- "javascript show ("湖南 省 ')"> 湖 南 省 < /A>< /TD> 
« TD» « A href- "javascript:show (' DX P8 2$ ' ) " BE PG 4$ < /A>< /TD> 
« TD» « A href- "javascript show (' ll] P8 2$ ') "> P 4$ « /A>< /TD> 
« TD» « A href- "javascript :show (' cR JE TT. 44 ") "» REIA « /A» « /TD> 
< ID» «A href= "javascript:show('iÍ FA ')"»if T 4 « /A>< /TD> 
< ID» «A href- "javascript :show ( i Pk ') "> PE < /25 « /TD> 
</TR> 
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<TR align= "center"> 
«TD» «A href- "javascript:show('zi Hj £i ') "» zx B 4$ « /A» « /TD»- 
« TD» « A href- "javascript :show (' St J 44 ') "» RME < /A>< /TD> 
« TD» «A href- "javascript:show (H 3l 2$ ' ) "> HRA « /A>< /TD> 
« TD» «A href="javascript:show(' 内 蒙古 ')"> 内 蒙古 < /A>< /TD> 
<TD><A href="javascript:show(' 宁 夏 ')"> 宁 夏 < /A>< /TD> 
<TD><A href- "javascript : show (' 西藏 ')"> 西 藏 < /A>< /TD> 
</TR> 
<TR align="center"> 
« TD» « A href="javascript:show(' 新 疆 ')"> 新 疆 < /A>< /TD> 
<TD><A href="javascript:show(' 青 海 省 ')"> 青 海 省 < /a> < /TD> 
« TD» « A href="javascript:show(' 香 港 ')"> 香 港 < /A» </TD> 
« TD» « A href="javascript:show(' 澳 门 ')"> 澳 门 < /A>< /TD> 
« TD» « A href="javascript:show(' 人 台湾 ')"> 人 台湾 </A></TD> 
<TD><A href="javascript:show(' 国 外 ')"> 国 外 < /A» < /TD» 
</TR> 
< /TABLE> 
</DIV> 
</DIV> 
<!- 职 能 类 别 搜索 开始 --> 
<DIV class= "search- train" id- "train"> 
<DIV class= "search- menu"» < TABLE width= "100$ " border= "0" cellspacing- "0" cellpadding 


="0"> 


<TR> 
« TD» « IMG src="image/orangearrow.gif">< SPAN class="white"> 请 选择 您 想 搜 索 的 职位 
« /SPAN» < /TD> 
<TD align- "right"><A href= "javascript:trainshow('tbox', 'trainid', 'train')" class-"A- 
white"» [ 确 定 ]< /a> &nbsp;« A href- "javascript:workclose ('train')" class="A- white"> [ 关 
P] ]< /A> &nbsp;« /TD» 
</TR> 
< /TABLE> < /DIV> 
< DIV> < TABLE width=" 98$ " border="0" cellspacing="0" cellpadding="0" align= 
"center"» 
< FORM method- "post" name- "tform"> 
<TR> 
« TD height="25">< INPUT id- "tbox" name="tbox" type- "checkbox" value- "IT 开发 及 应 
HAIT FERMA /TD> 
< TD» < INPUT id= "tbox" name- "tbox" type- "checkbox" value- "IT 管理 "> IT 管 
FE < /TD> 
< TD» « INPUT id= "tbox" name= "tbox" type="checkbox" value- "销售 管理 "> 销售 管理 < /TD 
$ 
< TD» « INPUT id= "tbox" name= "tbox" type="checkbox" value- "销售 人 员 "> 销 售 人 员 < /TD 
> 


< TD» « INPUT id- "tbox" name= "tbox" type="checkbox" value= "银行 > 银行 < /TD> 
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</TR> 
<TR> 


<TD height= "25">< INPUT id= "tbox" name= "tbox" type- "checkbox" value= "广告 /媒介 "> 


告 / 媒 介 </TD> 
« TD» « INPUT id- "tbox" name- "tbox" type- "checkbox" value= "写作 /出 版 /印刷 "> 写作 /出 
版 /印刷 < /TD> 
< TD» « INPUT id- "tbox" name= "tbox" type="checkbox" value- "生产 /营运 "> 生产 /营运 </ 
TD» 
« TD» « INPUT id- "tbox" name- "tbox" type="checkbox" value- "服装 /纺织 /皮革 "> 服装 / 纺 
织 / 皮 革 < /TD> 
< TD» « INPUT id- "tbox" name- "tbox" type="checkbox" value- "交通 运输 服务 "> 交通 运输 
服务 < /TD> 
</TR> 
<TR> 
« TD height="25">< INPUT id= "tbox" name= "tbox" type- "checkbox" value= "市 场 /营销 "> 
市 场 /营销 < /TD> 
« TD» < INPUT id- "tbox" name- "tbox" type- "checkbox" value- "房地产 "> 房地产 
< /TD> 
< TD» « INPUT id- "tbox" name- "tbox" type="checkbox" value= "医院 /医疗 /护理 "> 医院 / 医 
疗 /护理 </TD> 
< TD» « INPUT id- "tbox" name- "tbox" type="checkbox" value= "财务 /审计 /税务 "> 财务 / 审 
计 / 税 务 < /TD> 
<TD>< INPUT id- "tbox" name= "tbox" type="checkbox" value= "公务 员 "> 公 务 员 < /TD> 
</TR> 
<TR> 
« TD height= "25"> < INPUT id= "tbox" name= "tbox" type- "checkbox" value= "物业 管理 "> 
物业 管理 < /TD> 
< TD» « INPUT id- "tbox" name- "tbox" type="checkbox" value=" 人 力 资源 "> 人 力 资源 < /TD 
> 
< TD» « INPUT id- "tbox" name- "tbox" type="checkbox" value- "fL A 5i" FRUTA B < /TD 
> 


<TD>< INPUT id- "tbox" name- "tbox" type- "checkbox" value= "教师 "> 教师 < /TD> 
« TD» « INPUT id- "tbox" name- "tbox" type="checkbox" value= "餐饮 /娱乐 "> 餐饮 /娱乐 </TD 
> 
</TR> 
<TR> 
« TD height= "25"> < INPUT id="tbox" name= "tbox" type- "checkbox" value= "行政 /后 勤 "> 
行政 /后 勤 </TD> 
< TD» « INPUT id- "tbox" name- "tbox" type="checkbox" value- "美容 / 健 身 务 "> 美容 /健身 
</TD> 
« TD» « INPUT id= "tbox" name="tbox" type="checkbox" value=" 在 校 学 生 "> 在 校 学 生 < /TD 
> 
< TD>< INPUT id= "tbox" name- "tbox" type="checkbox" value- "兼职 "> 兼职 < /TD> 
< TD» « INPUT id= "tbox" name= "tbox" type="checkbox" value=" 其 他 "> 其 他 < /TD> 
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</TR> 
< /FORM> 
< /TABLE> 
</DIV> 
</DIV> 
<!-- 行 业 类 别 搜索 开始 一 > 
<DIV class- "search- train" id- "jobtype"> 
<DIV class- "search- menu"? < TABLE width- "100$ " border- "0" cellspacing- "0" cellpadding 
="0"> 
<TR> 
« TD» « IMG src= "image/orangearrow.gif"»« SPAN class="white"> 请 选择 您 想 搜索 的 行业 
< /SPAN» < /TD> 
<TD align- "right"><A href= "javascript:trainshow('jbox', 'jobid', 'jobtype')" class-"A- 
white"» [if 4E ]« /A> &nbsp;« A href= "javascript:workclose('jobtype')" class- "A- white"» [X 
闭 ]< /A> &nbsp;« /TD> 
</TR> 
< /TABLE> < /DIV> 
< DIV> < TABLE width=" 98%" border="0" cellspacing="0" cellpadding="0" align= 
"center"> 
<FORM method="post" name= "jfom"> 
<TR> 
« TD height= "25"» < INPUT id= "jbox" name= "jbox" type="checkbox" value- "计算 机 软件 " 
> 计算 机 软件 </TD> 
« TD» « INPUT id= "jbox" name= "jbox" type="checkbox" value- "计算 机 硬件 "> 计算 机 硬件 
</TD> 
« TD» « INPUT id= "jbox" name= "jbox" type="checkbox" value- "计算 机 服务 "> 计算 机 服务 
</TD> 
« TD» « INPUT id= "jbox" name="jbox" type="checkbox" value= "通信 /电信 /网 络 设备 "> 通 
信 / 电 信和 /网 络 设备 < /TD> 
< TD» « INPUT id= "jbox" name="jbox" type="checkbox" value=" 互 联网 /电子 商务 "> 互联 
网 /电子 商务 < /TD> 
</TR> 
<TR> 
« TD height= "25"> < INPUT id= "jbox" name= "jbox" type="checkbox" value= "网 络 游戏 "> 
网 络 游戏 < /TD> 
< TD» « INPUT id= "jbox" name= "jbox" type="checkbox" value= "会 计 / 审 计 "> 会 计 / 审 计 </ 
TD» 
« TD» « INPUT id- "jbox" name= "jbox" type="checkbox" value= "金融 /投资 /证 券 "> 金 融 / 投 
资 /证 券 < /TD> 
< TD» « INPUT id= "jbox" name- "jbox" type="checkbox" value= "银行 "> 银行 < /TD> 
<TD><INPUT id=- "jbox" name= "jbox" type="checkbox" value=" 批 发 /零售 "> 批发 /零售 < /TD 
» 
</TR> 
<TR> 
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« TD height- "25"» « INPUT id- "jbox" name- "jbox" type- "checkbox" value- "贸易 /进出 口 " 
> 贸易 /进出 口 < /TD> 
< TD» « INPUT id- "jbox" name= "jbox" type="checkbox" value= "保险 "> 保险 < /TD> 
« TD» « INPUT id- "jbox" name= "jbox" type="checkbox" value=" 办 公用 品 及 设备 "> 办 公用 
品 及 设备 < /TD> 
« TD» < INPUT id= "jbox" name= "jbox" type="checkbox" value=" 快 速 消费 品 "> 快 速 消费 品 
</TD> 
« TD» < INPUT id= "jbox" name-"jbox" type="checkbox" value- "机 械 /设备 /重工 "> 机 械 / 设 
备 / 重 工 </TD> 
</TR> 
<TR> 
< TD height- "25"> < INPUT id= "jbox" name= "jbox" type="checkbox" value- "教育 /培训 "> 
教育 /培训 < /TD> 
< TD» « INPUT id= "jbox" name- "jbox" type="checkbox" value=" 学 术 / 科 研 "> 学 术 / 科 研 </ 


TD> 

< TD» « INPUT id= "jbox" name= "jbox" type="checkbox" value=" 科 研 人 员 "> 科 研 人 员 < /TD 
> 

< TD» « INPUT id= "jbox" name="jbox" type="checkbox" value- "检测 /认证 "> 检测 /认证 </ 
TD> 


« TD» < INPUT id= "jbox" name= "jbox" type="checkbox" value- "餐饮 /娱乐 "> 餐饮 /娱乐 </TD 
> 
</TR> 
<TR> 
« TD height="25">< INPUT id= "jbox" name= "jbox" type="checkbox" value= "酒店 /旅游 "> 
酒店 /旅游 </TD> 
< TD» « INPUT id= "jbox" name= "jbox" type="checkbox" value- "生活 服务 "> 生活 服务 < /TD 


» 

« TD» « INPUT id= "jbox" name- "jbox" type="checkbox" value- "X 7g /[ fit "> $ x R t « / 
TD» 

< TD» « INPUT id- "jbox" name- "jbox" type="checkbox" value- "航天 /航空 "> 航天 /航空 </ 
TD» 


« TD» < INPUT id- "jbox" name-"jbox" type="checkbox" value=" 石 油 / 化 工 /矿产 "> 石油 /化 
工 /矿产 < /TD> 
</TR> 
<TR> 
« TD height= "25"» < INPUT id= "jbox" name= "jbox" type- "checkbox" value- "采掘 业 / 治 炼 " 
> 采掘 业 /冶炼 < /TD> 
<TD><INPUT id- "jbox" name= "jbox" type="checkbox" value- "电力 /水 利 "> 电 力 / 水 利 </ 


TD> 
« TD» « INPUT id- "jbox" name- "jbox" type="checkbox" value- "原材料 和 加 工 "> 原 材料 和 
加 工 </TD> 


< TD» « INPUT id= "jbox" name= "jbox" type="checkbox" value= "政府 "> 政府 < /TD> 
« TD» « INPUT id= "jbox" name- "jbox" type="checkbox" value= " 非 盈 利 机 构 "> 非 盈利 机 构 </ 
TD> 
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</TR> 
<TR> 
« TD height= "25" < INPUT id= "jbox" name= "jbox" type="checkbox" value= "环保 性 环保 < 
/TD> 
« TD» « INPUT id= "jbox" name= "jbox" type="checkbox" value- "农业 /渔业 /林业 "> 农业 / 渔 
业 / 林 业 < /TD> 
« TD» « INPUT id= "jbox" name= "jbox" type- "checkbox" value=" 多 元 化 业务 集团 "> 多 元 化 
业务 集团 < /TD> 
< TD» « INPUT id= "jbox" name= "jbox" type="checkbox" value= "法 律 "> 法 律 </TD> 
< TD» « INPUT id= "jbox" type="checkbox" value=" 其 他 行业 "> 其 他 行业 < /TD> 
</TR> 
< /FORM> 
< /TABLE» 
</DIV> 
</DIV> 
</DIV> 
< !-- InstanceEndEditable --» 
< DIV id= "bottom- bg" class=" bottom- bg"> 网 站 导航 | < A href=" index. html" 
class= "A- white"> 网 站 首页 < /A> | < A href= "search.html" class- "A- white"» 职位 
搜索 </A> | < A href=" login. html" class- "A- white" > Myjob« /A» | < A href=" 
register.html" class= "A- white"> 用 户 注册 < /A> | < A href= "login.html" class- "A 
- white"» Jf j X£ 3t </A> | «A href- "intro.html" class- "A- white" fij Jj 44 Jl « /A» | «A href= 
"company.html" class- "A-white"> 招 聘 公司 < /A» « /DIV> 
<DIV id= "bottom" class- "bottom"> 人才 招 聘 E-mail:hr@ 51job.com« BR> 个 人 求职 E-mail: 
clube 51job.com 或 垂询 :800- 820- 5100 
<BR> 
未 经 本 招聘 网 站 同意 ,不 得 转载 本 网 站 之 所 有 招聘 信息 及 作品 
<BR> 
无 忧 工作 网 版 权 所 有 scopy; 1999- 2007<BR> 
<A href-"http://www.miibeian.gov.cn" target="_blank"> < IMG src= "image/bottoml.gif" 
border= "0">< /A> < /DIV> 
< /BODY> 
< 1— InstanceEnd --»« /HTML» 


3.6 招聘 公司 页 面 


页 面 要 求 如 下 。 

CD 页 面 打开 时 ,弹出 广告 窗口 。 

(2) 二 级 的 横向 菜单 ,鼠标 移动 一 级 菜单 时 ,二 级 菜单 显示 ,离开 时 ,二 级 菜单 隐藏 ; 
鼠标 在 菜单 上 时 , 超 链接 文字 及 背景 样式 改变 。 

(3) 四 幅 图 片 循环 显示 的 横幅 广告 。 

(4) 职位 按 地 区 搜索 ,实现 级 联 的 二 级 下 拉 列 表 框 。 
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G) 左 侧 的 功能 菜单 下 的 超 链 接 ,实现 对 应 网 页 右 侧 相 对 层 的 显示 、 隐 藏 效果 。 
招聘 公司 页 面 如 图 3.6 所 示 。 


EES O ORA 
Mirrie Group — yas opm 


ao Fs | 


计划 管理 主管 2007-10-13 
数字 电视 产品 策划 2007-10-12 
数字 电视 北 务 管理 专员 2007-10-12 


天 津 ,长 沙 
郑州 ,济南 
一 选择 城市 -- ~ 北京 , 上海 


广州 ,深圳 
运行 Ai 
ETE 运行 维护 工程 师 中 信和 网 络 有 限 公司 杭州 南京 


福州 ,武汉 
战略 研究 投资 分 析 师 中 信和 网 络 有 限 公司 北京 
祯 站 管理 主管 中 信 天 津 工 北 发 展 公司 xz 


图 3.6 招聘 公司 页 面 


代码 如 示例 3.6 所 示 。 

示例 3.6 

< HTML» < !-- InstanceBegin template- " /Templates/Template. dwt" 
codeOutsideHTMLIsLocked- "false" --> 

< HEAD» 


< META http- equiv- "Content- Type" content- "text/html; charset- gb2312"» 
< !-- InstanceBeginEditable name= "doctitle" 一 -> 

< TITLE» $ HB A n] R] 9i < /TITLE> 

< LINK href= "image/style.css" type= "text/css" rel= "stylesheet"» 

< SCRIPT language- "JavaScript" > 

function show (d1) { 

document.getElementById(dl).style.display- 'block'; // 显 示 层 

} 


function hide (d1) { 
document.getElementById(dl).style.display- 'none';  // 隐 藏 层 
} 


// 弹 出 flash 广 告 窗口 
window. open ( ' open. html ', '', 'top- 0, left- 200, width= 300, height= 250, 
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scrollbars= 0,resizable- 0'); 


< /SCRIPT> 

< ! -- InstanceEndEditable 一 一 > 

< !-- InstanceBeginEditable name= "head" 一 一 > 

< !-- InstanceEndEditable --» 

< /HEAD> 

« BODY» 

< ! -- InstanceBeginEditable name= "EditRegion3" --> 
< DIV> 


< !-- 头 部 及 菜单 --> 
< DIV> < TABLE width="730" border="0" cellspacing- "0" cellpadding- "0" 
align= "center"» 
« TR» 
< TD bgColor="# e5e5e5" height=" 60" > < DIV style=" float: left; 
padding- left:10px;"» < IMG src- "image/zx- banner.gif"» < /DIV> 
< DIV style= "padding- right:10px; float:right"» 
< OBJECT classid- "clsid: D27CDB6E- AE6D- 11cf- 96B8- 444553540000" 
codebase = " http: //download. macromedia. com/pub/shockwave/cabs/flash/ 
swflash.cab# version- 7,0,19,0" width= "375" height- "48"» 
< PARAM name= "movie" value= "image/zxtop.swf"» 
< PARAM name= "quality" value= "high"> 
< EMBED src= "image/zxtop.swf" QUALITY- "high" PLUGINSPAGE- "http: // 
www. macromedia. com/go/getflashplayer" TYPE =" application/x - 
shockwave- flash" width= "375" height= "48"» < /EMBED> 
< /OBJECT> 
< /DIV> 
< /TD> 
< /TR> 
< TR» < TD height= "1"> < /TD> < /TR> 
< TR> 
< TD» < TABLE width= "100%" border=" 0" cellspacing- "0" cellpadding- " 
0" align= "center"> 
< TR» < TD width= "172" bgcolor= "£ dfdfdf" align= "center" style="border- 
bottom: # ffffff 1 solid; "><A href= "company.html"»« FONT color= "# 000000"> Pj 页 < /FONT» « /A» 
</TD> 
< TD» <A href="#" class-"div- link" onMouseOver =" show (' s1')" onMouseOut = 
"hide ("'s1')"> 关 于 中 信 < /a>< /TD> 
<TD><Ahref="#" class- "div- link" onMouseOver- "show ('s2') " onMouseOut- "hide ('s2')" 
> 公司 业务 </R></TD> 
X TD» «A href- "# " class- "div- link" onMouseOver- "show ('s3')" onMouseOut= "hide ('s3')" 
> 公益 事业 < /a></TD> 
< TD» « A href="#" class-"div- link" onMouseOver =" show (' 54')" onMouseOut = 
"hide ('s4') "> tB fri WF< /A>< /TD> 
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X TD» « A href- "# " class- "div- link" onMouseOver- "show ('s5') " onMouseOut- "hide ('s5')" 
> 推荐 招聘 < /a>< /TD> 
X TD» «A href- "4 " class- "div- link" onMouseOver- "show ('s6') " onMouseOut- "hide ('s6')" 
> 特色 推荐 < /A>< /TD> 
</TR> 
« TR» « TD» < /TD> 
< TD» « DIV class- "company- hide" id- "sl" onMouseOver- "show ('s1')" onMouseOut- "hide (' 
S1')"»«A href- "$ " class- "div- link"» Zt ri] (iij ft « /A» « BR» « A href="#" class- "div- 
link"» ff Hl </A> « BR» « A href- "£ " class- "div- link"> 领 导 题词 < /A> < BR» « A href=" 
#" class- "div- link"> 业 务 回顾 < /A» « BR» <A href= "£ " class- "div- link"» Zt 5] JJ £< /A 
><BR><A href- "£" class- "div- link"> 中 信和 风格 < /A» «BR» « A href="#" class-"div- 
link"> 公 司 年 报 </a> « BR» «A href- " " class- "div- link"» Zi m] Ñ < /A>< /DIV» « /TD> 
XTD»«DIV class-"company- hide" id- "s2" onMouseOver- "show ('s2') " onMouseOut- "hide 
('s2')"» «A href- "£" class- "div- link"» 4r Ñ< /A» « BR» « A href= " class- "div- link" 
> 非 金 融 < /A>< /DIV» « /TD> 
<TD><DIV class="company- hide" id="s3" onMouseOver="show('s3')" onMouseOut- "hide 
('s3')"><A href="#" class="div- link"> 拱 贫 < /A><BR><A href="#" class="div- link" 
> 绿化 < /A><BR><A href="#" class- "div- link"> 援 藏 < /A>< /DIV>< /TD> 
<TD> <DIV class= "company- hide" id="s4" onMouseOver- "show ('s4')" onMouseOut- "hide 
('s4')">< /DIV» « /TD> 


<TD><DIV class- "company- hide" id="s5" onMouseOver- "show (' s5') " onMouseOut- " 
hide ('s5') "»« /DIV>< /TD> 


XTD»«DIV class- "company- hide" 


="s6" ‘onMouseOver= "show ('s6')" onMouseOu 
hide('s6')"><A href="#" class- "div- link"> 网 络 金融 </aA><BR><R href="#" class- "div 
-link"> 中 信 出 版 < /A» <BR><A href- "£ " class="div-1ink"> 会 展 服务 < /A» « /DIV>< /TD> 
< /TR> < /TABLE> < /TD> 
</TR> 
< /TABLE> 
« /DIV» 
«i— fal -— 
< DIV» < TABLE width= "730" border= "0" cellspacing- "0" cellpadding- "0" align="center"> 
«TR» 


< TD width- "172" style- "background- image: url (image/company- bg.gif); background- 
repeat:repeat- y;" valign="top"> 
<DIV style- "padding- left: 10px;"» < TABLE width- "100$ " border- "0" cellspacing- "0" 
cellpadding- "0"> 
< FORM method= "get" name= "myform"» < TR» 
<TD height- "30"> 用 户 名 : </TD> 
<TD><INPUT name= "username" type="text" class- "company- input"> < /TD> 
</TR> 
<TR> 
<TD height= "25"> 密 &nbsp;&nbsp;lij: < /TD> 
< TD» < INPUT name= "pwd" type="password" class= "company- input">< /TD> 
</TR> 
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<TR align= "center"> 
< TD height= "30">< INPUT name- "bl" type="button" value- "Xf 录 " class="btn">< /TD> 
< TD» « INPUT name- "B2" type- "reset" value- "Hi 置 " class- "btn">< /TD> 
< /TR> < /FORM> 
< /TABLE> 
</DIV> 
< DIV» « IMG src= "image/company- left01.gif">< /DIV> 
<DIV> < TABLE width= "85$ " border= "0" cellspacing= "0" cellpadding= "0" align- "center" 
» 
«TR» 
< TD height =" 25" > &nbsp; < IMG src -" image/company - arrow. gif" > < A href- 
"javascript:showr (1);"> 热 点 招聘 < /A>< /TD> 
</TR> 
<TR> 


« TD style= "background- image:url (image/company- dot.gif); background- repeat: repeat 
-x;"»«/TD» 

</TR> 

<TR> 

<TD height= "25"> &nbsp; < IMG src="image/company- arrow. gif">< A href= "javascript: 
showr (2);"> 检 索 职位 < /A>< /TD> 

</TR> 

<TR> 
<TD style= "background- image :url (image/company- dot.gif); background- repeat: repeat 
-x; "></TD> 

</TR> 

<TR> 

< TD height =" 25" > &nbsp; < IMG src=" image/company - arrow. gif" > < A href= 
"javascript:showr (3) ; "» iE ll « /A>< /TD> 

</TR> 

<TR> 
« TD style= "background- image :url (image/company- dot.gif); background- repeat : repeat 
-x;"»«/TD» 

</TR> 

<TR> 
<TD height= "25"> &nbsp; < IMG src-"image/company- arrow. gif">< A href= "javascript: 
showr (4);"> 找 回 密码 < /A>< /TD> 

</TR> 

<TR> 
<TD style= "background- image:url (image/company- dot.gif); background- repeat:repeat 
-x;"»«/TD- 

</TR> 

<TR> 
<TD height= "15">< /TD> 

</TR> 
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< /TABLE> 
< SCRIPT language- "javascript"> 
function showr (dd) ( 
for (var i=1;i<=4;i++){ 
if (i== Number (dd) ) 
document .getElementById ('left-menu'+dd) .style.display= 'block'; // 显 示 鼠 标 单 击 链接 对 应 层 
else 
document.getElementById('left-menu'*i).style.display- 'none';  // 隐 藏 其 他 层 
} 
} 
< /SCRIPT> 
</DIV> 
< DIV> < IMG src= "image/company- left02.gif">< /DIV> 
< TABLE width= "90$ " border= "0" cellspacing= "0" cellpadding- "0" align="center"> 
< FORM action="" method="get" name= "myforml"> 
<TR> 
<TD> 请 选择 城市 : < /TD> 
</TR> 
<TR> 
<TD height= "25" align= "center">< SELECT name= "selProvince" id= 
"selProvince" onChange- "changeCity ()" style- "WIDTH: 110px"> 
«OPTION» -选择 省 份 --< /OPTION> 
< /SELECT» 
</TD> 
</TR> 
<TR> 
<TD height= "25" align="center"> < SELECT name= "selCity" id="selCity" style- "WIDTH: 
110px"> 
«OPTION» -- 选 择 城市 --< /OPTION> < /SELECT> < /TD> 
</TR> 
<TR> 
« TD align- "center" height= "35"» < INPUT name= "B22" type="submit" value- " 查 ifj" class 
="btn">< /TD> 
< /TR> < /FORM> 
< /TABLE> < SCRIPT language= "javascript"> 
Var cityList =new Array(); 
cityList[' 北 京 市 '] = [' 北 京 市 ', ' 朝 阳 区 ', ' 东 城区 ', ' 西 城区 '，' 海 淀 区 ', I ROTE", 
' 丰 台 区 ', ' 怀 柔 ', ' 延 庆 ", "房山 ']; 
cityList[" 上 海 市 "] = [' 上 海 市 ', ' 宝 山区 ', ICT IX t, ' 直 贤 区 ',，' 虹 口 区 ', ' 黄 浦 区 '， 
"青浦 区 … "南汇 区 "徐汇 区 …， "卢湾 区 ']; 
cityList[' 广 东 省 '] = [广东 省 "广州 市 "惠州 市 "汕头 市 "珠海 市 "佛山 市 … 
"中 山 市 … "东莞 市 ']; 
cityList[' 深 圳 市 '] =[' 深 圳 市 ', "福田 区 ',' 罗 湖区 ',' 盐 田 区 ',' 宝 安 区 ',' 龙 岗 区 ',' 南 
山区 ',' 深 圳 周边 ']; 


cityList[" 重 庆 市 '] =[' 重 庆 市 ', ' 俞 中 区 '，' 南 岸 区 '，"' 江 北 区 '，' 沙 坪 坝 区 '，' 九 龙 坡 区 
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t, ' 渝 北 区 '，' 大 渡口 区 '，"' 北 碚 区 ']; 


cityList[' 天 津 市 '] = 


' 天 津 市 ', "和 平 区 ',' 河 西区 ',' 南 开 区 ',' 河 北 区 '，' 河 东区 ',' 红 


桥 区 '，" 塘 沽 区 '，" 开 发 区 ']; 


cityList[' 江 苏 省 '] = 
cityList[' 浙 江 省 '] = 
cityList[' 四 川 省 '] = 
cityList[' 海 南 省 '] = 
cityList[' 福 建 省 '] = 
cityList[' 山 东 省 '] = 
cityList[' 江 西 省 '] = 


"江苏 省 ', ' 南 京 市 ', "苏州 市 ', ' 无 锡 市 ']; 

"WEILE t, Bo rn, "宁波 市 ', "温州 市 ']; 

"四 川 省 ', ' 成 都 市 ']; 

"海南 省 IDE 

"福州 市 ', ' 厦 门市 ', "泉州 市 ', "漳州 市 ']; 
济南 市 ', ' 青 岛 市 ', ' 烟 台 市 ']; 

' 江 西 省 ', ' 南 昌 市 ']; 


cityList[' 广 西 '] =[' 广 西 ',' 南 宁 市 ']; 


cityList[' 安 徽 省 '] = 
cityList[' 河 北 省 '] = 
cityList[' 河 南 省 '] = 
cityList[" 湖 北 省 '] = 
cityList[ "湖南 省 '] = 
cityList[' 陕 西 省 '] = 
cityList[' 山 西 省 '] = 


"安徽 省 ',' 合 肥 市 ']; 

' 河 北 省 ",' 石 家 庄市 I; 
"河南 省 '，' 郑 州 市 ']; 

"BER sU t iR E; 
"湖南 省 ， "长沙 市]; 

"Beni WRT nn 
"山西 省 ",' 太 原市 ']; 


cityList[' 黑 龙 江 省 '] = [' 黑 龙 江 省 ', "哈尔滨 市 ']; 
cityList[' 国 外 '] =[' 国 外 ']; 
cityList[' 其 他 '] =[' 其 他 ']; 


function changeCity () 


{  // 自 动 创建 城市 地 区 列表 


var province- document .myforml.selProvince.value; 


document .myforml.selCity.options.length- 0; 


for (var i in cityList) 


{ 


if (i ==province) 


{ 


for (var j in cityList[i]) 


t 


document .myforml.selCity.options.add (new Option 
(cityList[i][j], cityList[i] [j])); 


H 


document .myforml.selCity.options.selctIndex- 0; 


function Allcity O (.  // 自 动 创 建城 市 列表 
for (var i in cityList) 


{ 
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document .myforml.selProvince.options.add (new Option(i, i)); 


H 
document .myforml.selProvince.selectedIndex — 0; 


window.onLoad- AllCity (); 
< /SCRIPT> 


</TD> 
<TD valign="top"> 
< !-- 轮 换 横幅 广告 一 > 


<DIV align= "center">< IMG src= "jimage/scrol11.jpg" style- "display:none;"i 


= "adln> 


ad2"» < IMG src=" image/ 


«IMG src-"image/scroll3. jpg" style=" display: none;" id 
Scroll2.jpg" style- "display: none;"id- "ad3"» < IMG src= 
display:none; "id- "ad4"» « /DIV> 
< SCRIPT language- "javascript"» 
var NowFrame-1; // 全 局 变量 ,轮换 显示 图 片 的 第 一 张 
var MaxFrame=4; // 全 局 变量 ,轮换 显示 图 片 的 最 大 张 数 
function adv(){ 
for (var i- l;i«-MaxFrame;i*-*)( 


image/scroll4.jpg" style-" 


if (i--NowFrame) 
document .getElementById ('ad' * NowFrame) .style.display- ''; // 目 前 显示 的 图 片 
else 
document .getElementById ('ad'* i).style.display- 'none'; // 隐 藏 其 他 图 片 
) 
t 
if (NowFrame-- MaxFrame) // 设 置 下 一 张 显示 的 图 片 
NowFrame-1; 
else 
NowFrame- NowFrame- 1; 
} 
setTimeout('adv()',2000); ”// 设 置 定时 器 ,显示 下 一 张 图 片 
} 
window .onLoad= adv () ; // 当 页 面 载 人 时 ,调用 aav () 函 数 
< /SCRIPT> 


< -热点 招聘 层 开始 --> 
<DIV style= "display:block;padding- top:15px;" id- "left- menul"» 
« TABLE width- "554" border- "0" cellspacing- "0" cellpadding- "0" align- "right"» 
<TR> 
« TD colspan="6" height="25"> < IMG src-"image/company- arrow. gif"> < SPAN class=" 
login-bold"> 热 点 招聘 < /SPAN> < /TD> 
</TR> 
<TR> 
<TD class= "company- trl" width= "25"> gnbsp;< /TD> 
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<TD class- "company-trl"> 职 位 名 称 </TD> 
« TD class= "company- trl"> 公 司 名 称 < /TD> 
« TD class= "company-trl"> 人 数 </TD> 
« TD class- "company-trl"> 地 点 </TD> 
<TD class= "company-trl"> 发 布 时 间 < /TD> 
</TR> 
<TR> 
< TD class- "company-brl"> 1< /TD> 
« TD class- "company- br1"»« A href="#"> il Xj] EME < /A>< /TD> 
<TD class- "company- brl"»«A href="#"> 中 信和 网 络 有 限 公 司 < /A>< /TD> 
<TD class- "company- br1"» 1< /TD> 
« TD class= "company- br1"» {4b 5i < /TD> 
«X TD class- "company- br1"» 2007- 10- 13« /TD> 
</TR> 
<TR> 
<TD class= "company- br1"> 2< /TD> 
« TD class="company-br1"><A href- "4 "» EC: rb, L7 ih W RIJ < /A>< /TD> 
<TD class- "company- brl"»«A href="#"> 中 信和 网 络 有 限 公司 < /A>< /TD> 
< TD class= "company-brl"> 2< /TD> 
<TD class= "company-brl"> 北 京 </TD> 
<TD class= "company-brl"> 2007- 10- 12< /TD> 
</TR> 
<TR> 
<TD class= "company- br1"> 3< /TD> 
<TD class= "company-brl"><R href- " 虽 "> 数 字 电视 业务 管理 专员 < /A>< /TD> 
<TD class= "company-br1"><A href- "4 "» rf fä Rt A IRA F] </A> < /TD> 
< TD class= "company-brl"> 2< /TD> 
« TD class= "company-brl"> 北 京 </TD> 
<TD class- "company- br1"» 2007- 10- 12< /TD> 
</TR> 
<TR> 
X TD class= "company- br1"> 4< /TD> 
< TD class- "company- br1"» «A href=#"> 运 维 工程 师 一 电源 系统 < /A>< /TD> 
<TD class= "company- brl"><A href=#"> 中 信和 网 络 有 限 公司 < /A>< /TD> 
<TD class= "company- br1"> 1< /TD> 
« TD class= "company-brl"> 南 京 ,郑州 <BR> 
北京 ,上 海 <BR> 
广州 ,深圳 <BR> 
福州 ,武汉 <BR> 
天 津 ,长 沙 <BR> 
郑州 ,济南 
</TD> 
« TD class= "company-brl"> 2007- 10- 08« /TD> 
</TR> 
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"company- brl"> 5< /TD> 

<TD class= "company-brl"><R href- 哩 "> 运行 维护 工程 师 < /A>< /TD> 
<TD class- "company-brl"><R href- "$ "» rf fci Id £& A RA 8] « /A>< /TD> 
<TD class- "company- br1"> 2< /TD> 


<TD class- "company- br1"» Jb 3X ,上海 <BR> 
广州 ,深圳 <BR> 
杭州 ,南京 <BR> 
福州 ,武汉 < /TD> 
< TD class- "company- br1"» 2007- 10- 07< /TD> 
</TR> 


'ompany- br1"» 6< /TD> 
ompany- brl"><R href- "$ "> lik it WESE 1E Vt 4) Pr Mili « /a> < /TD> 
"company- br1"» «A href- "#"> 中 信 网 络 有 限 公司 </a> < /TD> 
<TD class= "company-brl"> 2< /TD> 
« TD class- "company-brl"> 北 京 </TD> 
<TD class= "company-brl"> 2007- 10- 07< /TD> 
</TR> 
<TR> 
<TD class= "company- br1"> 7< /TD> 
« TD class= "company-brl"><R href- "# "> 预算 管理 主管 </a> < /TD> 
« TD class- "company- brl"»«A href- "4 ">H fi X HE T. Mr Az Rej] « /A>< /TD> 
<TD class= "company- br1"> 1< /TD> 
<TD class= "company-brl"> 天 津 </TD> 
<TD class= "company-brl">2007- 10- 06« /TD> 
</TR> 
<TR> 


< TD colspan= "6" height= "10">< /TD> 
</TR> 
< /TABLE> 
</DIV> 
< !-- 检 索 职位 开始 --> 
<DIV style= "display:none;padding- top:15px;" id- "left- menu2"» 
« TABLE width= "554" border- "0" cellspacing- "0" cellpadding- "0" align- "right"> 
«TR» 
<TD colspan- "2" height- "25"» < IMG src- "image/company- arrow.gif"» < SPAN class=" 
login- bold"> 添 加 检索 器 < /SPAN» < /TD> 
« / TR» « FORM action- "" method- "post" name- "form- menu2"> 
<TR> 
« TD class= "company-br2"> 公 司 名 称 关键 字 < /TD> 
X TD class= "company-br3">< INPUT name= "company- key" type="text" class= 
"register- input" 
</TD> 


Ox 招聘 网 站 设计 139 


</TR> 
<TR> 
« TD class= "company-br2"> 职 位 名 称 关 键 字 </TD> 
< TD class- "company- br3"» « INPUT name- "job- key" type="text" class= 
"register- input"? « /TD> 
</TR> 
<TR> 
<TD class= "company-br2"> 职 位 类 型 < /TD> 
< TD class= "company- br3"» « INPUT name- "job- type" type="text" class= 
"register- input"» « /TD> 
« /TR» « TR» 
« TD class= "company- br2"» X ffi H H< /TD> 
<TD class= "company- br3"» < INPUT name- "fdate" type="text" class- "register- input"» 
«/TD» 
« /TR» « TR» 
« TD class- "company- br2"» T. ff: Hi [X < /TD> 
< TD class- "company- br3"» « INPUT name- "address" type="text" class= 
"register- input"» « /TD> 
« /TR» « TR» 
« TD class= "company-br2"> 薪 酬 范围 < /TD> 
X TD class= "company- br3"» « INPUT name- "salary" type="text" class= 
"register- input"» « /TD> 
< /TR» <TR> 
« TD class= "company-br2"> 其 他 关键 字 <BR> (岗位 职责 ,任职 条 件 )< /TD> 
< TD class= "company- br3"» < TEXTAREA name= "con- key" cols- "40" rows= "6">< /TEXTAREA» 
</TD> 
</TR> 
<TR> 
< TD align="center" colspan= "2" height- "30"» < INPUT name= "left- btn" type= "submit" 
class="btn" value= "搜索 "> 
</TD> 
</TR> 
<TR> 
< TD» &nbsp;< /TD> 
X TD» gnbsp;< /TD> 
< /TR>< /FORM> 
< /TABLE> 
</DIV> 
<! 一 注册 开始 --> 
<DIV style= "display:none;padding- top:15px;" id= "left-menu3"> 
< TABLE width= "554" border= "0" cellspacing= "0" cellpadding= "0" align= "right"> 
<TR> 
<TD colspan-"2" height="25"> < IMG src= "image/company- arrow.gif"> < SPAN class=" 
login-bold"> 用 户 注册 < /SPAN> < /TD> 
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< /TR» < FORM action- "" method= "post" name= "form- menu3"» 
<TR> 
<TD class= "company- br2"> E- mail« /TD> 
<TD class= "company- br3"> < INPUT name= "email" type="text" class= "register- input"> 
</TD> 
« TD class= "company- br2"> Fl P 4 < /TD> 
<TD class= "company- br3"> < INPUT name= "email" type="text" class= "register- input"> 
</TD> 
</TR> 
<TR> 
<TD class= "company-br2"> 密 码 < /TD> 
<TD class= "company- br3"» « INPUT name- "pwd" type="text" class- "register- input"></ 
TD» 
« TD class- "company- br2"> 确 认 密 码 < /TD> 
< TD class= "company- br3">< INPUT name= "repeatpwd" type="text" class= 
"register- input">< /TD> 
</TR> 
<TR> 
« TD class= "company-br2"> 联 系 方式 </TD> 
< TD class= "company-br3"><INPUT name- "tel" type="text" class- "register- input"></ 
TD» 
< TD class= "company- br2" > 地址 < /TD> 
<TD class-"company- br3"» < INPUT name- "Caddress" type="text" class= "register- 
input"»« /TD> 
</TR> 
<TR> 
<TD align="center" colspan- "4" height= "30"» < INPUT name= "left3- btn" type- "submit" 
class- "btn" value- "注册 "> 
</TD> 
</TR> 
<TR> 
« TD» &nbsp;< /TD> 
< TD» &nbsp;< /TD> 
< TD» &nbsp;< /TD> 
X TD» gnbsp;< /TD> 
</TR></EORM> 
< /TABLE» 
</DIV> 
<! 一 找 回 密码 开始 --> 
<DIV style= "display:none;padding- top:15px;" id= "left-menu4"> 
< TABLE width= "554" border- "0" cellspacing- "0" cellpadding- "0" align="right"> 
<TR> 
<TD colspan-"2" height="25"> < IMG src="image/company- arrow.gif"» < SPAN class=" 
login-bold"> 找 回 密码 < /SPAN> < /TD> 
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< /TR> < FORM action="" method= "post" name= "form- menu4"> 
<TR> 
« TD class= "company-br2"> 请 输入 用 户 名 < /TD> 
« TD class- "company- br3"» « INPUT name- "r- username" type- "text" class= 
"register- input" 
</TD> 
</TR> 
<TR> 
<TD class="company- br2"> 请 输入 注册 邮箱 < /TD> 
X TD class= "company- br3">< INPUT name= "r- email" type="text" class= "register- input" 
> 
</TD> 
</TR> 
<TR> 
<TD align="center" colspan= "2" height= "30"» « INPUT name= "left4- btn" type- "submit" 
class="btn" value= "确定 "> 
</TD> 
</TR> 
<TR> 
« TD» &nbsp;< /TD> 
« TD» gnbsp;< /TD> 
< /TR> < /FORM> 
< /TABLE> 
« /DIV» 
</TD> 
</TR> 
< /TABLE> 
</DIV> 


« /DIV» 

< !-- InstanceEndEditable --> 

<DIV id-"bottom- bg"class-"bottom- bg"> 网 站 导航 | « A href-" index.html" class- 
"A-white"> 网 站 首页 < /A> | <A href- "search.html" class- "A- white"> 职 位 搜索 < /a> | <A href 
-"login.html" class="A- white">Myjob< /A> | <A href- "register.html" class- "A- white"> 用 
户 注册 < /a> | «A href="login.html" class- "A- white"> 用 户 登录 </A> | <A href- "intro.html" 
class= "A- white"> 简 历 管理 < /A> | <A href="company.html" class- "A- white"> 招 聘 公 司 </A></ 
DIV> 

<DIV id- "bottom" class- "bottom"> 人 才 招 聘 E-mail:hr8 51job.com<BR> 个 人 求职 E-mail:club 
@51job.com 或 垂询 :800- 820- 5100 

<BR> 

未 经 本 招聘 网 站 同意 ,不 得 转载 本 网 站 之 所 有 招聘 信息 及 作品 

<BR> 

无 忧 工作 网 版 权 所 有 &copy;1999- 2007<BR> 

<A href-"http://www.miibeian.gov.cn" target-" blank"> < IMG src=" image/bottoml. gif" 


142 49. «2552 


border- "0"»« /A>< /DIV> 
< /BODY> 
< !-— InstanceEnd -->< /HTML> 


3.7. Ep AI f 


模仿 上 述 内 容 , 设 计 一 个 图 书 在 线 网 站 ,如 图 3.7 所 示 。 
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图 3.7 网 上 书城 


要 求 能 够 实现 以 下 界面 。 

(1) 用 户 注册 。 

(2) 用 户 登录 。 

(3) 首页 (网 站 内 容 的 综合 展示 ) 。 
(4) 某 类 商品 展示 。 

(5) 详细 商品 展示 。 

(6) 商品 购买 。 

(7) 购物 车 。 

(8) 用 户 注 册 帮 助 中 心 。 


"E 4 Hé chopter c 
基于 ASP. NET 的 网 上 书城 


网 上 书城 是 一 个 B-C 模式 的 电子 商城 ,该 网 上 书城 系统 要 求 能 够 实现 前 台 用 户 购 物 
和 后 台 管 理 两 大 部 分 。 


4.1 系统 概述 


4.1.1 前 全 购书 系统 


1l. 用户 注册 与 登录 


系统 考虑 用 户 购 买 的 真实 性 ,规定 游客 只 能 在 系统 中 查看 商品 信息 ,不 能 进行 商品 
的 订购 。 但 是 游客 可 以 通过 注册 的 方式 ,登记 相关 基本 信息 成 为 系统 的 注册 会 员 ,注册 
会 员 登 录 系 统 后 进行 商品 的 查看 和 购物 操作 。 


2. 图 书展 示 与 查询 


注册 会 员 可 以 通过 商品 列表 了 解 图 书 的 基本 信息 ,再 通过 图 书 的 详细 资料 页 面 了 解 
图 书 的 详细 情况 ,同时 可 以 根据 自己 的 需要 通过 图 书 编号 、 图 书 名 称 、 图 书 类 别 、 热 销 度 
等 条 件 进 行 图 书 的 查询 ,方便 快捷 地 了 解 自己 需要 的 图 书 的 信息 。 


3. 购物 车 与 订单 


注册 会 员 在 浏览 商品 的 过 程 中 ,可 以 将 自己 需要 的 商品 放 入 购物 车 中 ,用 户 最 终 购 
买 的 商品 从 购物 车 中 选取 。 会 员 在 购物 过 程 中 任何 时 候 都 可 以 查看 购物 车 中 自己 所 选 
取 的 商品 ,以 了 解 所 选 的 商品 信息 。 注 册 会 员 在 选 购 商品 后 ,在 确认 购买 之 前 ,可 以 对 购 
物 车 中 的 商品 进行 二 次 选择 : 可 以 从 购物 车 中 删除 不 要 的 商品 ,也 可 以 修改 所 选择 的 商 
品 的 数量 。 在 用 户 确认 购买 后 ,系统 会 为 注册 会 员 生 成 购物 订单 ,注册 会 员 可 以 查看 自 
己 的 订单 信息 ,以 了 解 付款 信息 和 商品 配送 情况 。 
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4. 意见 反馈 


该 系统 购物 用 户 可 以 通过 系统 提供 的 留言 板 将 自己 对 于 网 站 的 服务 情况 和 商品 信 
息 的 意见 进行 反馈 ,以 便 及 时 与 网 站 进行 沟通 .有 助 于 改善 网 站 的 服务 质量 。 


5. 会 员 信息 修改 


用 户 在 注册 后 ,可 以 在 系统 中 查看 用 户 的 个 人 资料 ,也 可 以 修改 用 户 的 个 人 资料 。 

CD 改变 个 人 设置 : 注册 用 户 可 以 修改 自己 的 账号 密码 和 其 他 个 人 信息 。 

(2) 注销 : 注册 会 员 在 购物 过 程 中 或 购物 结束 后 ,可 以 注销 自己 的 账号 ,以 保证 账号 
的 安全 。 


4.1.2 RREH 


1. 管理 用 户 


系统 管理 员 可 以 根据 需要 添加 、 修 改 或 删除 后 台 系统 中 的 用 户 , 也 可 以 修改 密码 等 
基本 信息 。 


2. 维护 商品 库 


具有 商品 管理 权限 的 管理 员 可 以 添加 商品 信息 ,修改 已 有 的 商品 信息 以 及 删除 商品 
信息 。 


3. 处 理 订 单 


订单 由 会 员 在 前 台 购 物 过 程 中 生成 ,后 台 管理 员 可 以 对 订单 异动 情况 进行 修改 处 理 
工作 ,同时 ,根据 订单 情况 通知 配送 人 员 进 行商 品 流通 配送 。 


4. 维护 会 员 信息 


对 系统 注册 会 员 的 信息 进行 维护 (如 会 员 账 户 密码 丢失 等 ) ,同时 也 可 以 完成 信息 查 
询 工作 。 

整个 系统 用 例 图 如 图 4. 1 所 示 。 

前 台 系 统 的 详细 功能 如 图 4. 2 所 示 。 

用 户 填 写 必 要 资料 后 成 为 本 购物 网 站 的 会 员 , 只 有 注册 会 员 才 可 以 进行 购物 操作 ， 
非 注册 会 员 只 能 查看 商品 资料 。 会 员 注 册页 面 如 图 4. 3 所 示 。 

注册 会 员 输 入 注册 用 户 名 和 密码 可 以 登录 本 网 站 进行 购物 ,登录 功能 及 登录 后 的 显 
示 信 息 如 图 4.4 所 示 。 

通过 系统 主页 可 以 查看 部 分 图 书信 息 , 如 图 4. 5 所 示 , 可 以 通过 图 书 查询 页 面 查看 
图 书信 息 。 
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图 4.1 系统 用 例 图 


网 上 书店 。 网 上 书店 为 您 提供 各 类 图 蔬 网 上 服务 
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图 4.2 系统 首页 


通过 单 击 图 上 的 图 书 图 片 或 图 书 的 名 称 就 可 以 查看 图 书 的 详细 信息 ,如 图 4. 


所 示 。 
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图 4.3 用 户 注册 


网 上 书店 。 网 上 书店 为 您 提供 各 类 图 书 网 上 服务 


4.5 图 书信 息 查询 


用 户 在 浏览 商品 信息 时 可 以 单 击 * 购 买 ?按钮 ,购买 指定 商品 ,即将 商品 放 和 人 购物 车 
中 ,对 于 购物 车 中 的 商品 ,用 户 可 以 确认 购买 ,也 可 以 退还 商品 (删除 ) ,还 可 以 增 减 所 购 
买 商品 的 数量 ,如 图 4.7 所 示 。 

用 户 可 以 查看 购物 车 时 单 击 “ 结 算 中 心 ” 按 钮 ,确认 购买 所 选择 的 商品 ,同时 填写 付 
款 方 式 \ 收 货 地 址 ,确认 邮箱 等 信息 完成 商品 的 订购 ,如 图 4. 8 所 示 。 


Os 基于 


的 网 上 书城 
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网 上 书店 


网 上 书店 为 您 提供 各 类 图 书 网 上 服务 


网 上 书店 


XX) BS | RETAS | Sara 
Copysiia O 01.2012 网上 书 铬 最 各 所 有 


图 4.6 图 书 详细 信息 


网 上 书店 为 您 提供 各 类 图 书 网 上 服务 
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图 4.7 购物 车 


用 户 可 以 通过 订单 查询 查看 自己 的 订单 处 理 情 况 , 订 单 查询 如 图 4. 9 所 示 。 


管理 员 通 过 后 台 管 理 各 个 功能 进行 网 站 管理 ,首先 管理 员 要 进行 后 台 登 录 后 ,进入 


管理 主页 ,如 图 4. 10 所 示 。 


发 货 管理 是 后 台 的 一 个 主要 功能 ,根据 客户 的 支付 情况 对 订单 进行 相应 的 处 理 。 当 
有 新 的 图 书 出 版 时 ,就 要 在 网 上 书店 进行 显示 ,这 就 需要 一 个 图 书信 息 新 增 的 功能 ,如 


图 4.11 所 示 。 
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4.9 订单 查询 
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4.10 后 台 管 理 主页 面 
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图 4.12 修改 图 书信 息 


整个 系统 的 数据 库 一 共有 7 张 表 ,各 个 数据 表 的 关系 如 图 4. 13 所 示 。 
各 个 表 的 具体 设计 如 表 4. 1 一 表 4.7 所 示 。 


表 4.1 订单 表 
序号 列 名 数据 类 型 长 度 | 小 数位 | 标识 | 主键 | 允许 空 默认 值 说 明 
1 | 订单 编号 int 4 0 是 E3 
2 会 员 名 char 12 0 是 
3 订单 日 期 datetime 8 3 是 (getdate()) 
4 发 货 方式 char 20 0 是 
5 付款 方式 char 20 0 是 
6 总 金额 float 8 0 是 
7 | 是 否 发 货 bit 0 是 
8 备注 ntext 16 0 是 


,rss sn 
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图 4.13 数据 表 关系 图 
表 4.2 购物 车 表 
序号 列 名 数据 类 型 | KE | 小 数位 | 标识 | 主键 | 允许 空 | 默认 值 | 说 明 
1 | 购物 车 编号 int 4 0 是 是 f 
2| 245 char 12 0 是 
3 | 图 书 编号 int 4 0 是 
4 | 数量 int 4 0 是 
表 4.3 管理 员 表 
序号 列 名 数据 类 型 | KE | 小 数位 | 标识 | 主键 | 允许 空 | 默认 值 | 说 明 
1 用 户 名 char 20 0 是 f 
2 密码 char 32 0 是 
3 权限 int 4 0 是 
表 4.4 会 员 表 
序号 列 名 数据 类 型 | KE | 小 数位 | 标识 | 主键 | 允许 空 | BRUE | 说 明 
i AA char 12 0 是 f 
2 密码 char 32 0 是 
3 姓名 char 20 0 是 
4 TES] char 2 0 是 
5 出 生日 期 datetime 8 3 是 
6 联系 地 址 nchar 60 0 是 
7 联系 电话 char 13 0 是 
8 | 手机 char 12 0 是 
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续 表 
序号 列 名 数据 类 型 | KE | 小 数位 | 标识 | 主键 | 允许 空 | 默认 值 | 说 明 
9 邮政 编码 char 6 0 是 
10 | 身份 证 号 char 18 0 是 
表 4.5 图 书 表 
序号 列 名 数据 类 型 | KE | 小 数位 | 标识 | 主键 | 允许 空 | RUE | 说 明 
i 图 书 编号 int 4 0 是 是 E 
2 类 型 编号 char 20 0 是 
3 | 图 书 名 nchar 40 0 是 
4 价格 money 8 4 是 
5 作者 char 50 0 是 
6 开本 char 16 0 是 
7 印张 float 8 0 是 
8 字数 char 10 0 是 
9 版 次 nchar 20 0 是 
10 书号 char 30 0 是 
11 印 数 char 10 0 是 
12 图 片 char 50 0 是 
表 4.6 图 书 类 型 表 
序号 列 名 数据 类 型 | 长 度 | 小 数位 | 标识 | 主键 | 允许 空 | 默认 值 | 说 明 
1 类 型 编号 char 20 0 是 T 
2 类 型 名 char 20 0 是 
表 4.7 详细 订单 表 
序号 列 名 数据 类 型 | KE | 小 数位 | 标识 | 主键 | 允许 空 | 默认 值 | 说 明 
1 | 订单 编号 int 4 0 是 
2 会 员 名 char 12 0 是 
3 图 书 编号 int 4 0 是 
4 数量 int 4 0 是 


为 了 方便 查询 ,在 数据 库 中 创建 购物 车 视图 、 图 书信 息 视 图 和 详细 订单 视图 等 ,具体 


见 数据 库 。 


4.2 数据 访问 类 


在 系统 中 要 进行 大 量 的 数据 库 操作 ,这 就 要 使 用 ADO. NET 技术 。ADO. NET 是 
微软 . NET 的 一 部 分 , 它 由 一 组 工具 和 类 库 组 成 ,应 用 程序 通过 它 可 以 轻松 地 与 基于 文 
件 或 服务 器 的 数据 存储 进行 通信 或 管理 。 
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ADO. NET 是 一 组 向 . NET 程序 员 公开 数据 访问 服务 的 接口 ,为 创建 分 布 式 数据 共 
享 应 用 程序 提供 了 一 组 丰富 的 组 件 , 它 对 SQL Server 和 XML 等 数据 源 及 通过 OLE DB 
和 XML 公开 的 数据 源 提供 一 致 的 访问 ,应 用 程序 可 以 使 用 ADO. NET 连接 到 这 些 数据 
源 ,并 检索 、 处 理 和 更 新 所 包含 的 数据 。 

ADO. NET 包含 用 于 连接 到 数据 库 .执行 命令 和 检索 结果 的 . NET Framework 数据 
提供 程序 ,可 以 直接 处 理 检 索 到 的 结果 .或 将 其 放 入 DataSet 对 象 ,以 便 与 来 自 多 个 源 的 
数据 进行 组 合 , 以 特殊 方式 向 用 户 公 开 。ADO. NET 对 象 可 以 向 独立 于 . NET 
Framework 的 数据 提供 程序 使 用 ,以 管理 应 用 程序 本 地 的 数据 或 源 自 XML 的 数据 。 

在 ADO. NET 数据 提供 程序 中 ,包括 多 个 核心 类 ,这 些 类 抽象 了 ADO. NET 中 数据 
库 访 问 各 独立 操作 所 需要 实现 的 功能 接口 .其 中 每 个 核心 类 都 表示 一 个 独立 的 功能 抽 
象 ,如 果实 现 新 的 数据 提供 程序 ,就 需要 至 少 实现 这 些 核 心 类 。 每 个 核心 类 都 具有 一 个 
唯一 的 基 类 ,而 且 这 些 基 类 都 以 Db 为 前 级 进行 命名 ,如 表 4. 8 所 示 。 


表 4.8 ADO.NET 核心 类 


核心 类 基 类 说 明 
数据 库 连 接 (Connection) ”| DbConnection 建立 并 表示 与 数据 库 服 务 器 的 连接 
数据 库 命令 (Command) — |DbCommand 标识 并 执行 特定 的 数据 库 命令 
数据 读 取 器 (DataReader) |DbDataReader eh 只 读 向 前 的 方式 获 


使 用 数据 库 服务 器 中 的 数据 填充 DataSet 


数据 适配器 (DataAdapter) |DbDataAdapter 或 将 DataSet 的 更 改 更 新 到 数据 库 服务 器 


事务 (Transaction) DbTransaction 在 数据 库 服务 器 登记 事务 
命令 生成 器 DbC. andBuild 自动 为 DataAdapter 生成 所 需要 执行 的 数 
(CommandBuilder) dd 据 库 命令 ,并 指定 命令 的 参数 等 
连接 字符 串 生成 器 Dbc tionStringBuild 自动 产生 与 Connection 对 象 相 对 应 的 数据 
(ConnectionStringBuilder) EE OP 库 连接 字符 串 文本 

y = 合 全 m 
参数 (Parameter) DbParameter s 令 的 输入 、 输 出、 返回 值 等 参 


在 进行 数据 库 相 关 的 接口 定义 时 ,可 以 尽 可 能 地 使 用 基 类 而 不 是 使 用 特定 的 数据 提 
供 程 序 的 类 ,这 样 可 以 使 得 接口 更 加 灵活 和 通用 。 

访问 数据 库 是 ADO. NET 存在 的 最 终 目 的 .ADO. NET 首先 从 数据 库 中 获取 数据 
到 内 存 , 然 后 再 对 内 存 中 的 数据 进行 处 理 ,最 后 更 新 到 数据 库 中 。ADO. NET 除了 直接 
处 理 内 存 数据 ,还 可 以 直接 执行 SQL 命令 ,对 数据 库 进 行 更 新 。ADO. NET 将 访问 数据 
库 的 操作 分 成 多 个 可 以 分 解 的 独立 动作 ,而 且 支 持 有 连接 和 无 连接 两 种 访问 模式 。 

在 ADO. NET 中 ,数据 库 访 问 被 分 解 成 多 个 独立 的 部 分 ,每 个 部 分 都 用 一 个 独立 的 
类 封装 起 来 ,各 个 部 分 完成 各 自 的 功能 .比如 数据 库 连 接 .数据 查询 命令 .数据 读 取 器 等 。 
在 ADO. NET 中 ,所 有 核心 类 都 包含 在 命名 空间 System. Data. Common 中 ,包括 以 下 几 
个 主要 的 类 。 
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(1) DbConnection 类 : 表示 一 个 与 数据 库 服务 器 之 间 的 连接 , 它 是 所 有 数据 库 连接 
类 的 基 类 , 它 提 供 了 打开 和 关闭 数据 库 连接 、 执 行事 务 、 创 建 命令 等 方法 。DbConnection 
类 包括 一 个 连接 字符 串 (ConnectionString) 属 性 ,该 属性 描述 了 数据 库 服务 器 的 连接 类 
信息 ,包括 服务 器 地 址 .登录 用 户 名 和 密码 .目标 数据 库 等 。 

(2) DbCommand 类 : 表示 一 个 可 以 执行 的 SQL 命令 ,可 以 使 SELECT, DELETE, 
UPDATE 等 通用 的 SQL 命令 的 字符 串 并 可 以 在 它 连接 的 DbConnection 对 象 上 执行 该 
命令 。 

(3) DbParameter 类 : 表示 SQL 命令 中 的 一 个 参数 ,包括 参数 名 、 参 数 类 型 等 信息 。 
DbCommand 类 通过 DbParameter 类 来 表示 SQL 命令 中 的 参数 ,并 且 将 参数 的 值 组 合 到 
SQL 命令 产生 的 所 有 记录 。 

(4) DbDataReader 对 象 通常 由 DbCommand. ExecuteReader ( ) 方 法 产生 ,而 且 
DbCommand 中 通常 是 一 个 SELECT 查询 命令 ,也 可 以 是 一 个 返回 数据 集 的 存储 过 程 。 

(5) DbDataAdapter 类 : 表示 一 个 数据 库 适 配器 , 它 通 过 DbCommand 类 执行 
SELECT 命令 ,从 数据 库 服务 器 获取 查询 结果 ,并 填充 到 内 存 数据 集中 。 当 内 存 DataSet 
中 的 数据 更 改 后 ,DbDataAdapter 提交 这 些 更 新 到 数据 库 。 

ADO. NET 通过 上 面 这 几 个 核心 类 来 完成 最 基本 的 数据 库 操 作 。 不 同 的 数据 提供 
程序 通常 需要 继承 并 实现 这 些 类 ,完成 与 目标 数据 库 进 行 交 互 的 功能 。ADO. NET PLE 
了 4 种 数据 提供 程序 ,分 别 用 于 访问 Microsoft SQL Server, Access, ODBC, Oracle 3X 4 
种 数据 库 , 这 些 数据 提供 程序 继承 并 实现 了 前 面 提 到 的 基 类 ,如 表 4.9 所 示 。 


表 4.9 ADO.NET 内 置 的 数据 提供 程序 


基 类 SQL Server OleDb ODBC Oracle 
命名 空间 System. Data. | System. Data. | System. Data. System. Data. System. Data, 
Pa Common SqlClient OleDb Odbc OrcaleClient 
连接 类 DbConnection | SqlConnection |OleDbConnection |OdbcConnection |OracleConnection 


命令 类 DbCommand SqlCommand |OleDbCommand OdbcCommand OracleCommand 


阅读 器 类 |DbReader SqlReader OleDbReader OdbcReader OracleReader 


适配器 类 | DbDataAdapter | SqlDataAdapter| OleDbDataAdapter | OdbcDataAdapter | OracleDataAdapter 


参数 类 DbParameter |SqlParameter |OleDbParameter |OdbcParameter — | OracleParameter 


从 表 中 可 以 看 出 ,ADO. NET 各 数据 提供 程序 实现 的 类 在 命名 规则 上 都 非常 有 规 
律 ,所 以 使 用 起 来 非常 方便 。 开 发 人 员 在 实现 特定 的 数据 提供 程序 时 也 应 该 尽 可 能 遵循 
这 个 命名 规则 。 


1. SqlConnection 类 


在 ADO. NET 中 .SqlConnection 类 表示 与 SQL Server 数据 库 的 连接 , 它 通 过 指定 
的 数据 库 连接 字符 串 ,连接 到 数据 库 ,并 打开 数据 库 ,其 属性 和 方法 如 表 4. 10 所 示 。 
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表 4. 10 ”SqlConnection 属性 和 方法 
分 类 名 R 说 — H8 


读 写 属性 ,表示 用 于 打开 SQL Server 数据 库 的 连接 字符 串 ,包括 数据 库 服 
务 器 的 IP 地址、 端口 .目标 数据 库 、 安 全 性 等 信息 


只 读 属性 ,表示 尝试 连接 到 数据 库 服务 器 服务 器 判断 为 连接 失败 的 等 待 
时 间 ,单位 为 秒 ,由 连接 字符 串 指 定 


只 读 属性 ,表示 当前 数据 库 或 连接 打开 后 要 使 用 的 数据 库 的 名 称 , 由 连接 


ConnectionString 


ConnectionTimeout 


属性 | Database 


字符 串 指定 
DataSource 只 读 属性 ,表示 要 连接 的 SQL Server 实例 的 名 称 
ServerVersion 只 读 属 性 ,获取 包含 客户 端 连接 的 SQL Server 实例 的 版 本 
State 只 读 属 性 ,只 读 属性 表示 当前 数据 库 连接 的 状态 
Open 使 用 ConnectionString 所 指定 的 属性 打开 数据 库 连接 
Close 关闭 与 数据 库 的 连接 


BeginTransaction “| 开始 在 SQL Server 数据 库 上 执行 一 个 事务 

”hangeDatabase “| 为 打开 的 数据 库 连 接 更 改 当前 数据 库 

hangePassword “| 将 连接 字符 串 中 指定 用 户 的 SQL Server 密码 更 改 为 提供 的 新 密码 
CreateCommand 创建 并 返回 一 个 与 SqlConnection 关联 的 SqlCommand XJ 4 
ClearAllPools 清空 连接 池 

earPool 清空 与 指定 连接 关联 的 连接 池 


A 


方法 


Q 


Q 


在 表 4. 10 中 列 出 的 众多 属性 和 方法 中 ,在 数据 库 连 接 和 断 开 操作 中 最 常用 的 有 
84. 

(D) ConnectionString: 连接 字符 串 . 它 包含 数据 库 服 务 器 的 地 址 .端口 .目标 数据 
PE .连接 超时 时 间 .安全 性 .登录 用 户 名 和 密码 等 信息 。 在 进行 数据 连接 之 前 必须 确定 正 
确 的 连接 字符 串 。 

(2) OpenO : 用 于 打开 由 ConnectionString 属性 指定 的 数据 库 连 接 , 如 果 连 接 字符 
不 正确 ,或 目标 服务 器 不 可 用 (比如 没有 打开 、 不 存在 等 ) 都 会 抛 出 异常 。 

(3) Close); 关闭 一 个 已 经 打开 的 数据 库 连 接 , 如 果 当 前 并 没有 连接 , 则 不 做 任何 
操作 。 

SqlConnection 类 用 于 和 要 交互 的 数据 源 建立 连接 ,在 执行 任何 操作 前 (包括 读 取 、 删 
除 新 增 或 者 更 新 数据 ) 必 须 建立 连接 。 创 建 SqlConnection 对 象 时 ,需要 提供 连接 字符 
串 。 连 接 字符 串 是 用 分 号 (;) 分 隔 的 一 系列 名 称 值 对 的 选项 。 选 项 的 顺序 并 不 重要 ,大 
小 写 也 不 重要 。 组 合 后 ,它们 提供 了 创建 连接 所 需 的 基本 信息 。 

尽管 随 着 RDBMS 和 提供 程序 的 不 同 , 连 接 字 符 串 也 不 同 ,但 几乎 总 是 需要 一 些 基 
本 的 信息 ,如 下 所 示 。 

CD 服务 器 位 置 。 在 本 书 的 示例 中 ,数据 库 服务 器 总 是 和 ASP. NET 应 用 程序 位 于 
同一 台 计 算 机 上 ,所 以 使 用 假名 localhost 而 不 使 用 计算 机 名 。 
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(2) 要 使 用 的 数据 库 的 名 称 。 

(3) 如 何 通过 数据 库 验 证 。 使 用 Oracle 和 SQL Server 提供 程序 时 可 以 选择 提供 验 
证 身份 或 者 以 当前 用 户 身份 登录 。 最 后 通常 是 最 佳 选择 ,因为 不 需要 在 代码 或 配置 文件 
中 输入 密码 。 

连接 字符 串 (ConnectionString) 是 连接 到 数据 库 的 一 个 核心 元 素 , 它 定义 了 数据 库 
服务 器 的 地 址 ,数据 库 名 称 、 登 录 名 和 密码 等 连接 信息 。 只 有 在 数据 库 连 接 关 闭 时 才能 
设置 连接 字符 串 的 值 。 

TE ADO. NET 中 ,通过 SqlConnection 类 进行 数据 库 连 接管 理 , 通 常 包括 设置 连接 字 
符 串 .打开 连接 和 关闭 连接 3 个 主要 操作 。 具 体 需 要 执行 以 下 几 个 步骤 。 

CD 通过 构造 函数 创建 一 个 SqlConnection 对 象 ,可 以 同时 指定 连接 字符 串 。 

(2) 通过 SqlConnection 对 象 的 Open() 方 法 打开 数据 库 连 接 。 

(3) 操作 完成 后 ,通过 SqlConnection 对 象 的 Close() 方 法 关闭 数据 库 连 接 。 

下 面 是 一 个 连接 数据 库 的 小 例子 。 

// 连 接 字 符 串 

string connString = "Server= .;Database- pubs; Integrated Security- true"; 

// 创 建 Connection 对 象 


SqlConnection conn =new SqlConnection (connString); 


conn.open(); // 打 开 数据 库 连 接 


conn.Close(); // 关 闭 数据 库 连 接 


这 段 代码 是 按照 上 面 介绍 的 3 个 步骤 打开 数据 库 连 接 , 最 后 关闭 连接 。 其 中 ,连接 
字符 串 connString 指定 了 数据 库 服 务 器 (Server) 是 “.”( 表 示 本 地 ),Integrated Security 
关键 字 为 true, 表 示 使 用 内 置 的 Windows 认证 。 另 外 连接 串 还 有 其 他 写法 : 


Data Source= .; Initial Catalog=pubs; User Id= sa; Password= 123 


Initial Catalog 等 同 于 Database. 而 “User Id = sas Password = 123" X zr fili H 
SqlServer 认证 模式 访问 数据 库 。 在 特定 计算 机 上 可 以 安装 SQL Server 的 多 个 实例 。 如 
果 和 希望 访问 SQL Server 的 一 个 已 命名 实例 ,向 Data Source 的 值 中 添加 一 个 反 斜 杠 (\)， 
然后 添加 SQL Server 实例 的 名 称 。 以 下 代码 访问 本 地 计算 机 上 的 SQLExpress 已 命名 
实例 。 

string strConn = "Data Source- .\\SQLExpress; "; 

或 者 

strConn =@ "Data Source- .\SQLExpress;"; 

连接 字符 串 中 使 用 @ 符 号 ,以 便 读者 能 够 专注 于 字符 串 的 内 容 , 而 不 用 关注 转 义 序 
列 。 没 有 指示 特定 语言 的 代码 段 将 显示 所 产生 的 字符 串 。 


如 果 对 连接 串 使 用 不 明确 的 话 , 还 可 以 使 用 连接 字符 串 生 成 器 ,通过 将 许多 常用 选 
项 作为 属性 公开 ,简化 了 生成 连接 字符 串 的 过 程 。ADO. NET 可 供 使 用 的 连接 字符 串 生 
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成 器 类 包括 许多 强 类 型 属性 ,其 对 应 于 许多 可 用 连接 字符 串 选项 ,通过 默认 的 索引 器 设 
置 了 Data Source, Initial Catalog 和 Integrated Security 连接 字符 串 关键 字 的 值 。 可 以 通 
过 访问 SqlConnectionStringBuilder 类 的 DataSource, InitialCatalog 和 IntegratedSecurity 属性 
来 重新 编写 此 代码 。 下 面 是 一 示例 ,只 是 这 一 次 使 用 了 SqlConnectionStringBuilder 的 
属性 。 


SqlConnectionstringBuilder bldr =new SqlConnectionStringBuilder(); 
bldr.DataSource - 8 ".MSQLExpress"; 

bldr.InitialCatalog - "Northwind"; 

bldr.IntegratedSecurity - true; 

// 将 所 生成 的 连接 字符 串 输出 到 控制 台 窗 口 

Console.WriteLine ("Resulting connection string: {0}", bldr.ConnectionString); 
// 以 SalConnection 使 用 所 生成 的 连接 字符 串 

SqlConnection conn =new SqlConnection (bldr.ConnectionString); 

conn.Open () ; 

conn.Close(); 


2. SqlCommand 类 


在 ADO. NET 连接 模式 下 访问 数据 库 ,通常 通 过 SqlCommand 类 执行 指定 的 SQL 
命令 ,包括 更 新 类 操作 和 查询 类 操作 两 种 。 更 新 类 操作 主要 用 于 更 新 数据 库 数 据 , 通 常 
只 返回 受到 影响 的 记录 数 。 通 过 SqlCommand 类 执行 更 新 操作 通常 包括 以 下 几 个 步骤 。 

(1) 通过 SqlConnection 类 建立 可 用 的 数据 库 连 接 。 

(2) 通过 SqlConnection 的 Open() 方 法 打开 数据 库 连 接 。 

(3) 创 建 SqlCommand 类 的 对 象 ,利用 构造 函数 初始 化 要 执行 的 SQL 命令 。 

(4) 使 用 SqlCommand. ExecuteNoQuery() 方 法 执行 SQL 命令 。 

(5) 如 果 需 要 , 则 重复 第 (3) 步 和 第 (4) 步 ,执行 更 多 SQL 命令 。 

(6) 通过 SqlConnection 的 Close() 方 法 关闭 数据 库 连 接 。 

上 面 步 又 中 ,第 (3) 步 和 第 (4) 步 持续 的 时 间 不 能 太 长 ,这样 会 长 期 占用 数据 库 连 接 ， 
容易 造成 服务 器 堵塞 ,如 果 需 要 长 时 间 的 数据 库 操作 ,可 以 考虑 分 成 多 个 独立 的 小 步 来 
完成 。Command 对 象 提供 了 3 个 方法 来 执行 命令 。 表 4. 11 列 出 了 这 些 方 法 。 

表 4.11 SqlCommand 相关 方法 


方 ”法 描 x 


执行 非 SELECT 语句 ,如 插入 .删除 、 更 新 等 SQL 语句 。 返 回 值 显示 命令 影响 
ExecuteNonQuery() “| 的 行 数 。 也 可 以 使 用 ExecuteNonQuery() 执 行 数据 定义 命令 该 命令 可 以 创建 、 
修改 和 删除 数据 库 对 象 (如 表 、 索 引 、 约 东 等 ) 


执行 SELECT 查询 ,并 返回 命令 生成 的 记录 集 的 第 一 行 第 一 列 的 字段 。 该 方 
法 常用 来 执行 使 用 COUNT() SUM 等 聚合 SELECT 语句 类 计算 单个 值 


ExecuteScalar() 


ExecuteReader() 执行 SELECT 语句 ,并 返回 一 个 封装 了 只 读 、 只 进 游标 的 DataReader 对 象 


string connStr —-"--:"; 


Os aF 的 网 上 书城 157 


SqlConnection conn =new SqlConnection (connStr); 

// 插 入 记录 用 的 soL 语句 

string sql -string.Format ("insert into Grade (GradeName) values ('(0]')", 
txtGradeName.Text); 

//8 ££ Command 对 象 

SqlCommand cmd - new SqlCommand (sql, conn); 

// 打 开 数 据 库 连 接 

conn.Open () 7 

// 执 行 插入 命令 

int result = cmd.ExecuteNonQuery () ; 

conn.Close(); // 关 闭 数据 库 连 接 


上 面 示例 代码 演示 上 面 6 个 步骤 的 使 用 ,首先 ,创建 一 个 数据 库 连 接 conn; 其 次 , 创 
建 一 个 SqlCommand 对 象 cmd, 设 置 要 执行 的 SQL 命令 ,并 打开 数据 库 连 接 ;再 次 ,通过 
ExecuteNonQuery() 方 法 执行 命令 ;最 后 ,关闭 数据 库 连接 。 其 中 result 表示 数据 库 中 受 
影响 的 行 数 ,如 果 为 0, 表示 本 次 更 新 失败 。 

上 面 的 代码 还 可 以 改 成 如 下 形式 。 


string connStr =" "; 

SqlConnection conn - new SqlConnection (connStr); 

// 插 入 记录 用 的 soL 语句 

string sql = string.Format ("insert into Grade (GradeName) values ('{0}')", 
txtGradeName.Text); 

// 创 建 Commana 对 象 

SqlCommand cmd = conn.CreateCommand (); 

cmd.CommandText- sql; 

// 打 开 数 据 库 连 接 

conn.Open () ; 

// 执 行 插入 命令 

int result = cmd.ExecuteNonQuery () ; 

conn.CloseQ; // 关 闭 数据 库 连 接 


ExecuteScalar() 方 法 通过 SELECT 语句 返回 查询 结果 中 第 一 行 第 一 列 的 值 。 该 方 
法 常用 于 执行 仅 返 回 单个 字段 的 查询 ,如 使 用 SQL 聚合 函数 COUNT() 或 SUM() 计 算 
的 结果 。 


string connStr =". "; 

SqlConnection conn =new SqlConnection (connStr); 
string sql - "SELECT COUNT(* ) FROM Student"; 
conn.OpenQ; // 打 开 数 据 库 连 接 

SqlCommand cmd - new SqlCommand (sql, connection); 
int num = (int)cmd.ExecuteScalar (); 


conn.Close(Q; // 关 闭 数 据 库 连接 
代码 很 简单 ,如 果 不 把 返回 值 转化 为 适当 的 类 型 就 几乎 没有 任何 意义 ,因为 
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ExecuteScalar O3R [f] — 4 X1 22 . 

使 用 命令 之 前 ,需要 选择 命令 类 型 ` 设 置 命令 文本 并 把 命令 绑 定 到 连接 上 。 可 以 通 
过 设置 相应 的 属性 (CommandType、CommandText 和 Connection) 来 设置 这 一 切 ,或 者 
把 它们 作为 构造 函数 的 参数 来 传递 。 

命令 文本 可 以 是 一 条 SQL 语句 、 一 个 存储 过 程 或 者 某 个 表 的 名 字 。 这 依赖 于 设置 
的 命令 类 型 。 有 3 种 命令 类 型 ,如 表 4. 12 所 示 。 


表 4.12. CommandType 枚 举 值 


值 描 述 
该 命令 将 执行 一 条 SQL 语句 。SQL 语句 通过 CommandText 属性 
CommandType. Text 设置 。 
选项 为 默认 值 


该 命令 将 执行 数据 源 中 的 一 个 存储 过 程 。 

通过 CommandText 属性 设置 存储 过 程 的 名 字 

该 命令 将 查询 表 中 的 所 有 记录 。CommandText 为 要 从 中 读 取 记录 
的 表 的 名 字 

( 仅 为 兼容 以 前 的 OLE DB 驱动 而 保留 。SQL Server 数据 提供 程 
序 不 支持 它 , 它 的 执行 效果 也 比 不 上 那些 精心 设计 的 查询 语句 ) 


CommandType. StoredProcedure 


CommandType. TableDirect 


3. SqlDataReader 类 


在 基于 连接 的 数据 库 访 问 模式 下 ,查询 类 操作 通常 是 执行 SELECT 命令 ,产生 的 查询 
结果 可 以 通过 SqlDataReader 类 依次 读 取 。SqlDataReader 类 是 ADO. NET 提供 的 用 于 
读 取 SQL Server 数据 库 记 录 的 读 取 器 , 它 读 取 数据 时 是 只 读 只 向 前 的 。SqlDataReader 
允许 只 进 、 只 读 流 的 方式 ,每 次 获取 一 条 SELECT 命令 返回 的 记录 ,这 种 方式 有 时 候 称 为 
流水 游标 。 使 用 DataReader 是 获得 数据 最 简单 的 方式 ,不 过 它 缺 乏 非 连接 的 DataSet 所 
具有 的 排序 等 功能 。 不 过 ,DataReader 提供 了 最 快捷 且 毫 无 拖 形 的 数据 访问 。 

表 4. 13 列 出 了 DataReader 的 核心 方法 。 


表 4. 13 DataReader 方法 


方 法 描 述 

将 行 游标 前 进 到 流 的 下 一 行 .在 读 取 第 一 行 记录 前 也 必须 调用 这 个 方法 
Read (DataReader 刚 创 建 时 , 行 游标 在 第 一 行 之 前 )。 当 还 有 其 他 行 时 ， 
Reader() 方 法 返回 true, 如 果 已 经 是 最 后 一 行 则 返回 false 


返回 当前 行 中 指定 序列 号 的 字段 值 。 返 回 数据 类 型 是 . NET 中 和 数据 
源 类 型 最 相似 的 那 一 个 。 如 果 使 用 序列 号 访问 字段 却 不 小 心 指定 了 不 
GetValue 存在 的 序列 号 ,会 得 到 IndexOutOfRangeException 异常 。 可 以 使 用 
DataReader 的 索引 通过 名 称 得 到 字段 值 ( 换 句 话说 ,dr. GetValue(0) 与 
dr ["NameofFirstField"] 等 效 ) 。 基 于 名 称 的 查询 更 易 读 ,但 效率 不 高 

GetInt32() ,GetCharO 、 这 些 方法 返回 当前 行 中 指定 序号 的 字段 值 ,返回 类 型 和 方法 名 称 中 要 
GetDataTime() 和 一 致 ,如 果 试 图 返回 错误 类 型 的 变量 ,程序 会 抛 出 InvalidCastException 
GetX X XO 异常 。 如 果 字 段 可 能 包含 空 值 ,那么 必须 在 调用 这 些 方法 之 前 进行 检查 
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续 表 
方 ”法 do xk 
E 如 果 命 令 返回 的 DataReader 包含 多 个 行 集 , 该 方法 将 游标 移动 到 下 一 
个 行 集 (刚好 在 第 一 行 以 前 ) 
M 关闭 Reader。 如 果 原 命令 执行 一 个 带 有 输出 参数 的 存储 过 程 , 该 参数 
仅 在 Reader 关闭 后 才 可 读 
通过 SqlCommand. ExecuteReader() 方 法 执行 SQL 命令 ,执行 完成 后 返回 一 个 可 以 


获取 查询 结果 的 SqlDataReader 对 象 。 开 始 时 SqlDataReader 指向 第 一 条 记录 之 前 , 必 


须 通 过 SqlDataReader 对 象 得 Read() 方 法 才 可 以 读 取 下 一 条 记录 ,重复 执行 ,直到 
记录 读 取 完成 。 


全 部 


通过 SqlCommand 类 和 SqlDataReader 类 执行 查询 操作 ,通常 需要 以 下 几 个 步骤 。 


(1) 通过 SqlConnection 类 建立 可 用 的 数据 库 连 接 。 
(2) 创建 SqlCommand 类 的 对 象 , 利 用 构造 函数 初始 化 要 执行 的 SQL 命令 。 
(3) 通过 SqlConnection 对 象 的 Open() 方 法 打开 数据 库 连接 。 


(4) 使 用 SqlCommand. ExecuteReader() 方 法 执行 SQL 命令 ,并 返回 SqlDataReader 


对 象 。 

G) 通过 SqlDataReader 对 象 GetX X X() 方 法 或 者 其 索引 器 的 方式 获取 某 个 字段 
的 值 。 

(6) 通过 SqlDataReader 对 象 的 Read() 方 法 读 取 下 一 条 记录 ,重复 第 (5) 步 直到 记录 
全 部 读 完 。 

(7) 通过 SqlConnectionn 对 象 的 Close() 方 法 关闭 数据 库 连 接 。 

string connStr ="™*"; 

SqlConnection conn - new SqlConnection (connStr); 

// 打 开 数 据 库 连 接 

conn.Open () ; 


string sql - "SELECT StudentName FROM Student 
WHERE StudentName LIKE 'ZES '"; 
SqlCommand cmd - new SqiCommand (sql, conn); 
SqlDataReader dataReader = cmd.ExecuteReader () ; 
Console.WriteLine(" 查 询 结果 : "); 
while (dataReader.Read()) 
1 
Console.WriteLine((string)dataReader "StudentName"]); 
} 
dataReader.Close(); 
conn.Close(); // 关 闭 数据 库 连接 


得 到 SqlDataReader 后 ,就 可 以 在 while 循环 语句 中 调用 Reader() 方 法 遍历 记录 ， 


Reader() 将 行 游标 移动 到 下 一 条 记录 (第 一 次 调用 时 ,移动 到 第 一 条 记录 ), 同 时 返 


回 一 


个 布尔 值 显示 是 否 还 有 更 多 的 行 。 上 面 的 示例 中 ,循环 会 继续 直到 Reader() 返 回 false. 
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这 样 循 环 优雅 地 结束 。 

24 SqlDataReader 遇 到 数据 库 里 的 空 值 时 , 它 返 回 一 个 常量 DBNull. Value。 试 图 访 
问 该 值 或 转换 它 的 数据 类 型 会 产生 异常 。 因 此 ,在 可 能 出 现 空 值 时 ,必须 使 用 下 面 的 代 
码 对 其 进行 测试 : 

if (reader["name"] — DBNull.Value) 


Ue ) 
else 


Ue ) 

每 次 执行 命令 并 没有 要 求 只 能 返回 一 个 结果 集 。 每 个 命令 可 以 执行 多 个 查询 ,并 返 
回 多 个 记录 集 。 读 取 大 量 相关 的 数据 时 它 特别 有 用 ,比如 产品 和 产品 类 别 共同 组 成 的 产 
品目 录 。 

命令 会 在 两 种 情况 下 返回 多 个 结果 集 。 

COD 调用 存储 过 程 时 ,该 存储 过 程 有 多 个 SELECT 语句 。 

(2) 直接 使 用 文本 命令 时 ,可 以 把 用 分 号 (;) 分 隔 的 命令 批 次 执行 。 但 并 不 是 所 有 的 
提供 程序 都 支持 这 种 技术 ,不 过 SQL Server 数据 库 提 供 程 序 支持 。 

下 列 定义 了 含有 3 条 SELECT 语句 的 字符 串 : 


string sql =@ "SELECT TOP 5 EmployeeID, FirstName, LastName FROM Employees;" + 
"SELECT TOP 5 ContactName, ContactTitle FROM Customers;" + 
"SELECT TOP 5 SupplierID, CompanyName, ContactName FROM Suppliers"; 


该 字符 包含 3 个 查询 。 它 的 执行 结果 会 返回 Employees 表 的 前 5 条 记录 、 
Customers 表 的 前 5 条 记录 以 及 Supplies 表 的 前 5 条 记录 。 

处 理 这 些 结果 非常 简单 。 开 始 时 SqlDataReader 提供 对 Employees 表 的 访问 ,通过 
Read() 方 法 读 取 全 部 记录 后 ,就 可 以 调用 NextResult() 方 法 询问 下 一 个 记录 集 了 。 当 没 
有 其 他 记录 和 集 时 ,该 方法 返回 false。 可 以 通过 while 循环 遍历 所 有 的 结果 集 ,但 需要 注 
意 的 是 在 读 取 完 第 一 个 记录 集 前 不 要 调用 NextResult() 方 法 。 看 下 面 的 示例 ， 


StringBuilder htmlStr =new StringBuilder (""); 
int i =0; 
do 
i 
htmlStr.Append("«h2» Rowset: "); 
htmlStr.Append(i.ToString()); 
htmlStr.Append|("« /h2» ") ; 
while (reader.Read()) 
t 
htmlStr.Append("«li»"); 
//Get all the fields in this row. 
for (int field =0; field «reader.FieldCount; field* + ) 
t 
htmlStr.Append (reader.GetName (field) .ToString()); 
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htmlStr.Append(": "); 
htmlStr.Append (reader.GetValue (field) .ToString()); 
htmlStr.Append ("&nbsp; &nbsp; &nbsp; ") ; 
) 
htmlStr.Append("« /li» "); 
} 
htmlSstr.Append ("<br><br>"); 
itg 
) while (reader.NextResult ()); 
//Close the DataReader and the Connection 
reader.Close(); 
con.Close(); 
/ /Show the generated HTML code on the page 
HtmlContent.Text —htmlStr.ToString(); 


注意 这 里 使 用 通用 的 GetValue() 方 法 询问 所 有 的 字段 , 它 接受 要 读 取 的 字段 的 序号 
作为 参数 。 因 为 这 段 代码 只 是 设计 用 于 读 取 与 查询 内 容 无 关 的 所 有 结果 集 的 所 有 字段 。 
不 过 ,在 真实 的 数据 库 应 用 程序 中 几乎 知道 表 和 字段 的 名 称 。 

结果 如 下 所 示 : 


Rowset: 0 


o EmployeeID: 1 FirstName: Nancy LastName: sua 
* EmployeelD.2 FirstName: Andrew LastName: Fuller 
* EmployeelD.3 FirstName: Janet LastName: Leverling 
* EmployeelD.4 FirstName: Margaret LastName: Peacock 
* EmployeelD. 5 FirstName: Steven LastName: Buchanan 


Rowset: 1 


e ContactName: Maria Anders ContactTitle: Sales Representative 

e ContactName: Ana Trujillo ContactTitle: Owner 

e ContactName: Antonio Moreno ContactTitle: Owner 

e ContactName: Thomas Hardy ContactTitle: Sales Representative 

e ContactName: Christina Berglund ContactTitle: Order Administrator 


Rowset: 2 


* SupplierID: 1 CompanyName: Exotic Liquids ContactName: Charlotte Cooper 
* SupplierID: 2 CompanyName: New Orleans Cajun Delights ContactName: Shelley Burke 

* SupplierID: 3 CompanyName: Grandma Kelly's Homestead ContactName: Regina Murphy 

* SupplierID: 4 CompanyName: Tokyo Traders ContactName: Yoshi Nagase 

* SupplierID: 5 CompanyName: Cooperativa de Quesos 'Las Cabras' ContactName: Antonio del Valle Saavedra 


在 ADO. NET 有 连接 模式 下 ,数据 库 模 式 都 是 实时 的 ,数据 处 理 逻 辑 通常 时 间 较 短 ， 
有 时 这 样 的 实现 不 能 满足 复杂 的 处 理 逻 辑 。 所 以 就 需要 用 到 ADO. NET 无 连接 模式 进 
行 数据 库 访问 。 

在 ADO. NET 中 , 非 连 接 模 式 访问 数据 库 通 常 是 将 数据 从 数据 库 服 务 器 通过 SQL 
查询 命令 获取 到 内 存 中 的 DataSet 或 DataTable 中 ,并 且 断 开 与 数据 库 的 连接 。 然 后 ,在 
内 存 中 根据 业务 逻辑 对 DataSet 和 DataTable 中 的 数据 进行 任何 合理 的 运算 。 最 后 ,再 
连接 到 数据 库 ,将 DataSet 和 Data Table 中 的 更 改 将 提交 到 数据 库 服务 器 。 由 此 可 见 , 非 
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连接 模式 访问 数据 库 具 有 如 下 优势 。 

CD 对 数据 库 连 接 的 占用 时 间 较 得 ,因为 只 有 需要 进行 交互 时 才 连 接 到 数据 库 ,可 以 
大 大 减轻 数据 库 服务 器 的 负担 。 

(2) 由 于 DataSet 和 DataTable 是 在 内 存 中 模拟 的 关系 数据 库 , 也 可 以 像 操 作 数据 
库 那 样 在 内 存 中 对 数据 进行 处 理 , 从 而 实现 非常 复杂 的 逻辑 。 

(3) 在 对 DataSet 和 DataTable 进行 处 理 时 ,可 以 利用 LINQ 实现 更 加 高 效 和 复杂 
的 查询 操作 。 

(4) 在 对 DataSet 和 DataTable 进行 处 理 时 .可 以 在 内 存 中 对 更 改 数据 进行 验证 , 保 
证 提交 到 数据 库 服 务 器 的 数据 都 是 有 效 的 。 

SqlDataAdapter 类 用 做 ADO. NET 对 象 模型 中 与 数据 连接 部 分 和 非 连接 部 分 之 间 的 桥 
梁 。SqlDataAdapter 从 数据 库 中 获取 数据 ,并 将 其 存储 在 DataSet 中 。SqlDataAdapter 也 可 
能 取得 DataSet 中 的 更 新 ,并 将 它们 提交 给 数据 库 。 

SqlDataAdapter 是 为 处 理 脱 机 数据 而 设计 的 ,调用 其 Fill 方法 填充 DataSet 时 甚至 
不 需要 与 数据 库 的 活动 连接 , 即 如 果 调 用 Fill 方法 时 ,SqlDataAdapter 与 数据 库 的 连接 
不 是 打开 时 ,SqlDataAdapter 将 自动 打开 数据 库 连接 ,查询 数据 库 , 提 取 查 询 结 果 , 将 查 
询 结 果 填 人 DataSet, 然 后 自动 关闭 数据 库 的 连接 。 


string connStr =""; 

SqlConnection conn =new SqlConnection (connStr); 
SqlDataAdapter adp; 

strSQL = "SELECT CustomerID, CompanyName FROM Customers"; 
adp - new SqlDataAdapter (strSQL, cn); 

DataSet ds -new DataSet () 7 

adp.Fill(ds, "Customers"); 


上 面 的 例子 也 可 以 改 为 如 下 内 容 : 


string connStr ="™"; 

SqlConnection conn =new SqlConnection (connStr); 

String strSQL = "SELECT CustomerID, CompanyName FROM Customers"; 
SqlCommand cmd = new SqlCommand (strSQL, conn); 

SqlDataAdapter adp- new SglDataAdapter (cmd) ; 

DataSet ds =new DataSet () ; 

adp.Fill(ds, "Customers"); 


要 通过 SqlDataAdapter 修改 数据 ,并 将 更 改 提交 到 数据 库 服务 器 ,这 就 需要 使 用 到 
SqlDataAdapter 的 InsertCommand, DeleteCommand 和 UpdateCommand 这 3 个 属性 ， 
它们 分 别 表示 插入 记录 、 产 出 记录 和 更 新 记录 时 要 调用 的 SQL 命令 。 值 得 庆幸 的 是 , 通 
常 开发 人 员 不 需要 明确 为 SqlDataAdapter 指定 InsertCommand, DeleteCommand 和 
UpdateCommand, 可 以 通过 SqlCommandBuilder 类 自动 创建 它们 。SqlCommandBuilder 
类 可 以 根据 SqlDataAdapter 的 SelectCommand 命令 自动 生成 用 于 更 新 数据 的 其 他 3 个 
命令 : 
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SqlCommandBuilder builder =new SqlCommandBuilder (dataAdapter); 
dataAdapter.Update (dataSet, "Teacher"); 


在 系统 中 要 大 量 对 数据 库 进 行 操作 ,因此 编写 一 个 数据 访问 公共 类 DB. cs. 代码 


如 下 : 


using System; 


using System.Data; 


using System.Configuration; 


using System.Web; 


using System.Web.Security; 


using System.Web.UI7 

using System.Web.UI.WebControls; 

using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 

using System.Data.SqlClient; 


///« summary» 

// [DB 的 摘要 说 明 
///« /summary» 
public class DB 


{ 


public SqlConnection conn =new SqlConnection(); 
public SqlCommand cmd =new SqlCommand(); 

public SqlDataAdapter adp - new SqlDataAdapter () ; 
public DataSet ds - new DataSet (); 


// 定 义 一 个 用 于 返回 数据 库 连 接 字 符 串 的 方法 
public String GetConnectionString () 
{ 
String ConStr; 
ConStr -ConfigurationManager.AppSettings.Get (0) .ToString(); 
return ConStr; 
i 
// 定 义 一 个 用 于 返回 数据 集 的 公共 查询 方法 
public DataSet GetDataTableBySql (String SqlStr) 
{ 
conn.ConnectionString =GetConnectionString() 7 
cmd.Connection - conn; 
cmd.CommandText —SqlStr; 
adp.SelectCommand = cmd; 
ds.Clear(); 
adp.Fill(ds); 


return ds; 
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public bool GetBoolBySql (String SqlStr) 
i 
conn.ConnectionString =GetConnectionString (); 
cmd.Connection =conn; 
cmd.CommandText =SqlStr; 
adp.SelectCommand = cmd; 


ds.Clear(); 
adp.Fill(ds); 


if (ds.Tables[0].Rows.Count ! =0) 
return true; 
else 


return false; 


// 定 义 一 个 用 于 返回 执行 数据 更 新 操作 是 否 成 功 标志 的 方法 
public bool UpdateDataBySql (String SqlStr) 
t 
conn.ConnectionString -GetConnectionString(); 
cmd.Connection - conn; 
cmd.CommandText -SqlStr; 
try 
t 
conn.Open () ; 
cmd. ExecuteNonQuery () 7 
conn.Close(); 
return true; 
J 
catch (SqlException) 
t 
conn.Close(); 


return false; 


4.3 用 户 注 册 和 模块 


该 模块 只 是 完成 用 户 的 注册 .注册 成 功 后 用 户 变 成 会 员 , 可 以 进行 购物 车 等 操作 。 
在 项 目 之 前 首先 学 习 几 个 对 象 。 
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1. Page Xf & 


在 ASP. NET 中 ,每 个 Web fi fk (ASP. NET 页 面 ) 都 是 从 Page 类 继承 而 来 ,一 个 
ASP. NET 页 面 实 际 上 是 Page 类 的 一 个 对 象 , 它 所 包含 的 属性 、 方 法 和 事件 用 来 控制 页 
面 的 显示 ,而 且 还 是 各 种 服务 器 控件 的 承载 容器 。Page 类 与 扩展 名 为 . aspx 的 文件 相关 
联 ,这 些 文件 在 运行 时 编译 为 Page 对 象 , 并 缓存 在 服务 器 内 存 中 。 

1) code-behind 模式 

通过 使 用 “@ page” 指 的 Inherits 和 codebehind 属性 将 代码 隐藏 文件 链接 到 . aspx 
文件 。 这 种 先 定 义 再 关联 的 模式 ,就 是 code-behind 模式 。 

2) Page_Init 事件 

Page Init 事件 在 页 面 服务 器 控件 被 初始 化 时 发 生 。 初 始 化 是 控件 生存 期 的 第 一 阶 
段 ,该 事件 主要 用 来 执行 所 有 的 创建 和 设置 实例 所 需 的 初始 化 步 又。 

3) Page_Load 事件 

Page Load 事件 在 服务 器 控件 加 载 到 Page 对 象 中 时 发 生 , 也 就 是 说 ,每 次 加 载 页 面 
时 ,无 论 是 初次 浏览 还 是 通过 单 击 按钮 或 因为 其 他 事件 再 次 调用 页 面 ,都 会 触发 此 事件 。 

4) Page_UnLoad 事件 

Page UnLoad 事件 在 服务 器 控件 从 内 存 中 印 载 时 发 生 。 该 事件 程序 的 主要 工作 是 
执行 所 有 最 后 的 清理 操作 ,如 关闭 文件 .关闭 数据 库 连接 等 ,以 便 断 开 与 服务 器 的 “紧密 ” 
联系 。 

5) IsPostBack 属性 

获取 一 个 值 ,该 值 指示 该 页 是 否 因 响应 客户 端 (postback) 而 加 载 ,或 者 是 被 首次 访问 
而 加 载 。 如 果 是 为 了 响应 客户 端 而 加 载 该 页 , 则 为 true, 否 则 为 false. 

6) IsValid 属性 

获取 一 个 值 , 该 值 指示 该 页 面 验证 是 否 成 功 。 如 果 该 页 验证 成 功 , 则 为 true, 和 否则 为 
false。 需 要 强调 的 是 ,应 在 相关 服务 器 控件 的 Click 事件 处 理 程序 中 将 该 控件 的 Causes 
Validation 属性 设 为 true, 或 在 调用 Page. Validate 方法 后 访问 IsValid 属性 。 


2. 数据 验证 控件 


在 设计 网 页 时 ,通常 会 遇 到 需要 用 户 输入 信息 的 情况 ,为 了 避免 用 户 输入 错误 数据 ， 
需要 对 用 户 所 输入 的 信息 进行 检查 , 即 验证 。 验 证 数据 控件 主要 有 RequiredFieldValidator 
控件 、CompareValidator 控件 、RangeValidator 控件 和 RegularExpressionValidator 控件 、 
ValidationSummary 控件 。 

1) RequiredFieldValidator 控件 

RequiredFieldValidator 控件 常用 来 验证 控件 的 输入 的 内 容 是 否 为 空 。 当 用 户 提 交 
网 页 中 的 数据 到 服务 器 时 ,系统 自动 检查 被 验证 控件 的 输入 内 容 是 否 为 空 , 如 果 为 空 , 则 
RequiredFieldValidator 控件 在 网 页 中 显示 提示 信息 。 

2) CompareValidator 控件 

CompareValidator 控件 将 一 个 控件 中 的 值 与 另 一 个 控件 中 的 值 进行 比较 ,或 者 与 该 
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控件 的 ValueToCompare 属性 值 进行 比较 。 

3) RangeValidator 控件 

RangeValidator 控件 是 指 用 户 在 Web 窗 体 页 上 输入 数据 时 ,检查 输入 的 值 是 否 在 指 
定 的 上 下 限 范围 之 内 的 一 种 验证 。 

4) RegularExpressionValidator 控件 

该 控件 是 用 来 验证 另 一 个 控件 的 值 是 否 与 指定 表达 式 的 值 匹配 。 正 则 表达 式 
(Regular Expressions) 是 由 普通 文本 字符 和 特殊 字符 组 成 的 字符 串 , 用 来 定义 文字 处 理 
时 需要 匹配 的 文本 内 容 模式 。 

5) ValidationSummary 控件 

该 控件 专门 用 来 显示 页 面 验证 控件 的 验证 错误 信息 。 


3. 设计 用 户 注 册页 面 


本 系统 开发 采用 Visual Studio 2010 ,数据 库 采 用 SQL Server 2008 express。 
选择 “新 建 网 站 ”, 在 模板 中 选择 C H i a AASP. NET 空 网 站 ”将 网 站 命名 为 
ebook, 保 存在 C 盘 ,如 图 4. 14 所 示 。 


— Jr FO mn 
uus i aone ms Wes | Vio 
E 
| Q occ Visual cs 
& ASP.NET Dynamic Data 实体 网 站 Visual Ctt 
& ASP.NET Dynamic Data Linq to SQL 网 站 Visual cr | 
Bg woss Visual cs 
rz ASP.NET Reports 网 站 Visual C 
A ASP.NET Crystal Reports 网 站 Visual C# | 


4.14 “新 建 网 站 ”对 话 框 


单 击 “ 确 定 ” 按 钮 ,至 此 ,一 个 名 为 ebook 的 网 站 创建 成 功 。 在 已 建 好 的 网 站 上 添加 
一 个 Web 窗 体 , 名 为 register. aspx, 即 用 户 注 册页 面 。 该 页 面 布 局 如 图 4. 15 所 示 。 
该 页 面 的 HTML 代码 如 下 : 


<%@ Page Language="C#" AutoEventWireup- "true" CodeFile="register.aspx.cs" Inherits=" 
register" $» 


<! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 
xhtmll/DTD/xhtmll- transitional.dtd"» 


a ^ 
ARARA DEDA R 


图 4.15 用 户 注册 页 面 


<HTML xmlns= "http: //www.w3.0rg/1999/xhtml" > 
< HEAD runat="server"> 

<TITLE> 注 册页 < /TITLE> 

< link rel="stylesheet" type="text/css" /> 

< /HEAD> 


<BODY> 

<FORM id= "forml" runat="server"> 

<DIV> 

<DIV style="text-align: center"> 

<DIV style="text-align: center"> 

< TABLE border= "0" cellpadding- "0" cellspacing- "0" style="width: 600px"> 
<TR> 

<TD> 


<asp:Label ID- "Labell" runat="server" Font- Bold- "True" Font- Names- "fif 4k caB2312" Font 


- Size- "XX- Large" 

ForeColor- "Blue" Text- "用 户 注册 "> < /asp:Label» « /TD» 
</TR> 

<TR> 

<TD> 

</TD> 

</TR> 

<TR> 

«TD style= "height: 307px"> 

< TABLE border= "0" cellpadding- "0" cellspacing="0" style="width: 600px"> 
<TR> 

<TD width- "100" align="right" style="height: 19px"> 
用 户 名 : </TD> 

<TD width= "220" style="height: 19px" align="left"> 
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<asp:TextBox ID-"txt User Name" runat="server" Width-"215px" TabIndex-"1"» «/asp: 
TextBox>< /TD> 

<TD style="height: 19px" align="left" abbr- ""» 

* <asp:Button ID="btn Check" runat="server" TabIndex- "2" Text- "检测 用 户 名 ”onclick=" 
btn Check Click" /> 

< asp: RequiredFieldValidator ID =" RequiredFieldValidatorl " runat =" server" 
ControlToValidate- "txt User Name" 

ErrorMessage- "RequiredFieldValidator"> 此 项 必 填 < /asp:RequiredFieldValidator»« /TD> 

</TR> 

<TR> 

<TD width= "100" align="right" style="height: 19px"> 

密码 : < /TD> 

<TD width= "220" align- "left" style- "height: 19px"> 

<asp:TextBox ID-"txt User Pwd" runat="server" TabIndex- "3" TextMode- "Password" Width- " 
215px"» < /asp:TextBox» < /TD> 

<TD align- "left" style- "height: 19px"> 

* « asp: RequiredFieldValidator ID -" RequiredFieldValidator2 " runat -" server" 
ControlToValidate- "txt User Pwd" 

ErrorMessage- "RequiredFielqValidator"> 此 项 必 填 < /asp:Requi redFieldValidator» < /TD> 


</TR> 

<TR> 

<TD width= "100" align="right" style="height: 19px"> 
确认 密码 : < /TD> 


<TD width= "220" style="height: 19px" align="left"> 

<asp:TextBox ID-"txt ReUser Pwd" runat="server" TabIndex- "4" TextMode- "Password" 

Width- "215px"» < /asp:TextBox» < /TD> 

<TD style="height: 19px" align="left"> 

* < asp: RequiredFieldValidator ID =" RequiredFieldValidator3" runat =" server" 

ControlToValidate="txt_ReUser_Pwd" 

ErrorMessage- "RequiredFieldValidator"> 此 项 必 填 < /asp:RequiredFieldValidator> 

<asp:CompareValidator ID- "CompareValidatorl" runat- "server" ControlToCompare- "txt User 
Pwa" 

ControlToValidate- "txt ReUser Pwd" ErrorMessage- "CompareValidator"> 两 次 输入 的 密码 不 

一 致 < /asp:CompareValidator>< /TD> 

</TR> 

<TR> 

<TD width- "100" align- "right"> 

姓名 : </TD> 

X TD width= "220" align="left"> 

<asp:TextBox ID-"txt Rel Name" runat="server" TabIndex-"5" Width- "215px"» < /asp: 

TextBox> < /TD> 

<TD align="left"> 

* < asp: RequiredFieldValidator ID =" RequiredFieldValidator4" runat =" server" 

ControlToValidate="txt_Rel Name" 
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ErrorMessage- "RequiredFieldValidator"> 此 项 必 填 < /asp:RequiredFieldValidator>< /TD> 
</TR> 

<TR> 

« TD width- "100" align="right" style="height: 19px"> 

TESI : </TD> 

<TD width- "220" style="height: 19px" align="left"> 
«asp:DropDownList ID-"DDL Sex" runat="server" TabIndex- "6"» 
<asp:ListItem Jj « /asp:ListItem» 

<asp:ListItem Zt < /asp:ListItem» 

< /asp:DropDownList» < /TD> 

<TD style="height: 19px" align="left"> 


</TD> 

</TR> 

<TR> 

<TD width= "100" align="right" style="height: 22px"> 
出 生日 期 : </TD> 


X TD width= "220" align="left" style="height: 22px"> 

«asp:DropDownList ID-"DDL Year" runat="server" TabIndex- "7" Width- "71px"» 

< /asp:DropDownList» fF < asp:DropDownList ID= "DDl Month" runat- "server" TabIndex- "8" 
Width- "49px"» 

< /asp:DropDownList» }] «asp:DropDownList ID= "DDL Day" runat- "server" TabIndex- "9" Width 
="49px"> 

< /asp:DropDownList» 日 < /TD> 

<TD align="left" style="height: 22px"> 


</TD> 

</TR> 

<TR> 

<TD style="height: 19px" width= "100" align="right"> 
联系 地 址 : </TD> 


<TD style="height: 19px" width- "220" align="left"> 
<asp: TextBox ID-"txt Address" runat="server" TabIndex-"10" Width-"215px"» < /asp: 


TextBox> < /TD> 

<TD style="height: 19px" align="left"> 

</TD> 

</TR> 

<TR> 

« TD width= "100" align="right" style="height: 19px"> 
邮政 编码 : < /TD> 


« TD width= "220" style="height: 19px" align="left"> 
<asp:TextBox ID-"txt Postalcode" runat="server" TabIndex- "11" Width- "215px"» < /asp: 
TextBox> < /TD> 

<TD style="height: 19px" align="left"> 

< asp: RegularExpressionValidator ID =" RegularExpressionValidatorl" runat- "server" 
ControlToValidate="txt_Postalcode" 
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ErrorMessage- "RegularExpressionValidator" ValidationExpression- "\df6}"> 邮 政 编码 格式 不 
符 < /asp:RegularExpressionValidator>< /TD> 


</TR> 

<TR> 

<TD width= "100" align="right" style="height: 18px"> 
联系 电话 : </TD> 


X TD width= "220" align="left" style="height: 18px"> 

<asp:TextBox ID-"txt Tel" runat="server" TabIndex- "12" Width- "215px">< /asp:TextBox>< 
/TD> 

<TD align- "left" style- "height: 18px"> 

* < asp: RequiredFieldValidator ID =" RequiredFieldValidator5 " runat -" server" 
ControlToValidate- "txt Tel" 

ErrorMessage- "RequiredFieldValidator"> 此 项 必 填 < /asp:RequiredFieldValidator» 

< asp: RegularExpressionValidator ID =" RegularExpressionValidator2" runat- "server" 
ControlToValidate- "txt Tel" 

ErrorMessage- "RegularExpressionValidator" ValidationExpression-" (X (\d{3, 4) V) I Nd (3, 4) 
-)? \d{7,8}"> 联 系 电话 格式 不 符 < /asp:RegularExpressionValidator>< /TD> 

</TR> 

<TR> 

<TD width= "100" align="right" style="height: 24px"> 

手机 : </TD> 

<TD width= "220" align- "left" style- "height: 24px"> 

<asp:TextBox ID- "txt Mobile" runat="server" TabIndex- "13" Width- "215px"» < /asp:TextBox 
></TD> 

<TD align="left" style="height: 24px"> 

</TD> 

</TR> 

<TR> 

< TD width= "100" align="right" style="height: 24px"> 

身份 证 号 : < /TD> 

<TD width= "220" align- "left" style- "height: 24px"> 

<asp:TextBox ID-"txt ID Card" runat="server" TabIndex-"14" Width- "215px"» < /asp: 
TextBox> < /TD> 

<TD align="left" style="height: 24px"> 

* < asp: RequiredFieldValidator ID =" RequiredFieldValidator6 " runat =" server" 
ControlToValidate- "txt ID Card" 

ErrorMessage- "RequiredFieldValidator"> 此 项 必 填 < /asp: RequiredFieldValidator» 

< asp: RegularExpressionValidator ID =" RegularExpressionValidator3" runat = "server" 
ControlToValidate- "txt ID Card" 

ErrorMessage- "RegularExpressionValidator" ValidationExpression- "Ad(17) (Nd (1) 1X) "> £r f/j 
证 号 码 格式 不 符 < /asp:RegularExpressionValidator>< /TD> 

</TR> 

<TR> 

« TD width- "100" align="right" style="height: 24px"> 
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</TD> 

<TD width= "220" align= "left" style= "height: 24px"> 

«asp:Button ID= "btn Register" runat="server" TabIndex- "15" Text=" 注 册 " OnClick="btn_ 
Register Click" /> 

<asp:Button ID- "btn Catch" runat="server" TabIndex- "16" Text=" 重 填 " OnClick- "btn Catch 
| Click" /> 

<asp:Label ID- "Label2" runat="server" Font- Size- "Smaller" ForeColor- "Red" Text- "Wf * 
的 为 必 填 项 ">< /asp:Label>< /TD> 

<TD align- "left" style- "height: 24px"> 

</TD> 

</TR> 

< /TABLE> 

<asp:Label ID="Labinfo" runat="server" ForeColor- "Red" Font- Size="Smaller"> < /asp: 
Label>< /TD> 

</TR> 

< /TABLE> 

< /DIV> 

« /DIV» 

<BR/> 

<BR/> 

« /DIV» 

< /FORM> 

< /BODY> 

< /HTML> 


4. 检测 用 户 名 


检测 用 户 名 功能 主要 是 检查 在 注册 时 输入 的 用 户 名 是 否 已 经 被 注册 ,原理 是 根据 输 
和 人 的 用 户 名 对 数据 库 中 的 用 户 表 进 行 查询 , 若 数据 表 中 有 对 应 的 记录 则 表示 此 用 户 名 已 
经 被 注册 , 若 数据 表 中 没有 对 应 记录 则 表示 此 用 户 名 还 没有 被 注册 。 代 码 如 下 : 


protected void btn Check Click(object sender, EventArgs e) 
{ 

// 调 用 数据 库 操作 公共 方法 检查 用 户 名 是 否 被 使 用 

DB db =new DB(); 

String SqlStr ="select * from 会 员 表 where 会 员 名 ='" +this.txt User Name.Text +"'"; 
DataSet ds =new DataSet (); 

try 

t 

ds.Clear(); 

ds —db.GetDataTableBySql (SqlStr); 

if (ds.Tables[0].Rows.Count == 0) 

{ 

this.Labinfo.Text — "恭喜 您 ,此 用 户 名 可 以 使 用 !"; 
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else 
t 
this.Labinfo.Text = "对 不 起 ,此 用 户 已 经 被 注册 ,请 输入 其 他 用 户 名 !"; 


catch (Exception ) 
t 
this.Labinfo.Text =" 没 有 得 到 任何 数据 ,请 重 试 1"; 


5. 实现 注册 
注册 功能 将 新 用 户 在 注册 时 输入 的 信息 保存 到 用 户 表 中 ,也 就 是 在 数据 表 中 执行 插 


入 操作 。 代 码 如 下 : 


protected void btn Register Click(object sender, EventArgs e) 
{ 


// 将 密码 进行 MD5 加 密 

String Md5 User Pwd = FormsAuthentication.HashPasswordForStoringInConfigFile (this.txt_ 
User Pwd.Text, "MD5"); 

DB db =new DB() ; 

String SqlStr = "insert into 会 员 表 (会 员 名 ,密码 ,姓名 ,性 别 ,出 生日 期 ,联系 地 址 ,邮政 编码 , 联 
系 电话 ,手机 ,身份 证 号 )" 

+"values('" *this.txt User Name.Text +"','" +Md5 User Pwd *"','" *this.txt Rel Name.Text 
amr 

*"'"-this.DDL Sex.SelectedItem.Text +"','" *this.DDL Year.SelectedItem.Text + "-" + 
this.DDl Month.SelectedItem.Text +"-" +this.DDL Day.SelectedItem.Text +"'," 
*"'"-this.txt Address.Text *"','" +this.txt Postalcode.Text +"','" +this.txt Tel.Text 
amm 

*"'"this.txt Mobile.Text +"','"+this.txt ID Card.Text +"')"; 

Boolean InsertResult; 

InsertResult - db.UpdateDataBySql (SqlStr); 

if (InsertResult -—— true) 

t 

this.Labinfo.Text = "恭喜 您 注册 成 功 !"; 

} 

else 

t 

this.Labinfo.Text =" 对 不 起 ,注册 失败 ,请 重 试 1"; 

this.txt User Name.Focus (); 


} 
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用 户 注册 完成 后 就 可 以 进行 登录 了 ,用 户 登 录 成 功 后 将 保留 用 户 的 登录 信息 ,为 了 
将 系统 的 登录 信息 进行 保留 ,下 面 学 习 ASP. NET 的 内 置 对 象 。 传 统 上 把 HTTP 称 为 
无 状态 协议 ，HTTP 本 质 上 由 一 个 请 求 和 一 个 响应 组 成 : 浏览 器 请 求 一 个 特定 URL. 
务 器 用 一 个 响应 页 面 来 应 答 。 尽 管 最 终 用 户 可 能 觉得 他 们 的 网 上 冲浪 过 程 由 一 系列 连 
续 的 步骤 组 成 ,但 是 对 于 协议 来 说 ,每 个 交付 的 页 面 都 是 相互 独立 的 ;任何 显示 仅仅 是 与 
最 近 的 URL 请 求 对 应 的 输出 。 这 样 做 的 好 处 就 是 大 大 减轻 了 服务 器 的 负载 ,服务 器 可 
以 不 必 去 把 用 户 以 往 的 行为 写 到 内 存 中 ,只 是 对 用 户 的 当前 行为 作出 应 答 就 可 以 了 。 但 
是 这 种 方式 也 有 很 大 的 问题 ,比如 使 用 购物 车 时 ,如 果 把 商品 放 到 购物 车 继续 购物 ,再 添 
加 商品 时 就 会 发 现 以 前 添加 的 商品 都 不 见 了 ,就 是 这 个 无 状态 协议 把 用 户 以 前 的 东西 都 
丢 了 。 如 果 需 要 保留 这 些 数据 ,就 必须 要 使 用 特定 的 内 置 对 象 来 完成 。 对 象 其 实 就 是 可 
以 重用 的 代码 片段 ,类 是 对 象 的 定义 ,对 象 是 类 的 实例 。 对 象 一 般 有 属性 、 方 法、 事件 。 
ASP. NET 能 够 利用 成 千 上 万 的 内 置 对 象 。 本 质 上 内 置 函 数 、.Web 控件 也 都 可 以 看 做 内 
置 对 象 ,都 是 类 实现 的 。 


1. Response 对 象 


Response 对 象 用 于 控制 发 送 给 用 户 的 数据 , 即 从 ASP. NET 的 服务 器 端 响 应 到 用 户 
浏览 的 网 页 上 ,以 供用 户 浏 览 , 其 类 名 称 为 HttpResponse。 它 除了 直接 发 送信 息 给 浏览 
器 外 还 可 以 重 定向 浏览 器 另 一 个 URL 或 设置 Cookie 的 值 。 

1) 直接 输出 内 容 

如 果 要 在 网 页 上 输出 提示 信息 ,可 以 用 一 个 Label 控件 来 实现 , 即 向 页 面 添加 一 个 
Label 控件 。 要 不 使 用 任何 控件 来 显示 提示 信息 ,可 以 使 用 Response 对 象 的 Write 方法 
来 实现 ,如 下 所 示 : 


Response.Write(" 呵 呵 ,这 个 按钮 暂时 还 没有 实现 提交 功能 ,下 次 再 试 吧 1) ; 


2) 输出 文本 文件 

Response. WriteFile 方法 可 将 文本 文件 中 的 所 有 内 容 输出 到 网 页 上 ,只 要 将 文本 文 
件 的 名 称 写 和 人 WriteFile 方法 即 可 ,其 语法 格式 为 : Response. WriteFile(" 文 件 名称 ") 。 
文件 名 称 可 使 用 “相对 地 址 ”或 “绝对 地 址 ”的 写法 。 在 输出 文件 内 容 的 同时 ,编译 器 还 会 
对 内 容 进 行 编译 ,如 果 含 有 HTML 标记 符 就 会 被 编译 出 来 。 

图 4. 16 是 一 个 文本 文件 response. txt。 

页 面 初始 化 时 代码 如 下 : 


protected void Page Load (object sender, EventArgs e) 
{ 
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图 4.16 文本 文件 


Response.Charset = "GB2312"7 
Response.WriteFile ("response.txt"); 


运行 结果 如 图 4. 17 所 示 。 


这 个 是 利用 Response.WriteFile 方 
法 输出 的 , 它 不 但 可 以 输出 内 容 , 还 
可 以 将 HTML 标 记 内 容 编译 之 后 输出 ， 
看 下 面 的 控件 代码 怎么 输出 。 


& $ FE S & d» Q 100 - 
图 4.17 输出 文件 


3) 结束 数据 输出 

若 要 停止 服务 器 端 继续 向 浏览 器 发 送 数据 ,可 以 使 用 Response. End 方法 。 假 设 某 
网 站 的 开放 时 间 为 正常 的 上 班 时 间 , 其 他 时 间 不 提供 浏览 服务 ,此 时 可 用 Response. End 
方法 来 实现 。 代 码 如 下 所 示 : 


protected void Page Load (object sender, EventArgs e) 
t 
Response.Write(" 系 统 当 前 时 间 是 : " + DateTime.Now.Hour * "Ji" + DateTime.Now.Minute +" 
分 <br>"); 
if (DateTime.Now.Hour <8 || DateTime.Now.Hour >18) 
t 
Response.Write ("本 网 站 此 时 间 停 止 开 放 <br>"); 
Response.Write ("本 网 站 开放 时 间 为 : 上午 8 点 到 下 午 6 点 "); 
Response.End() ; 


else 


Response.Redirect ("1ogin.aspx"); 
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} 


4) 建立 新 链接 

可 以 采用 超 链接 控件 来 实现 网 页 的 链接 ,这 个 超 链接 是 显示 在 网 页 上 的 可 见 对 象 ， 
有 了 时 不 希望 在 网 页 上 显示 超 链接 的 形式 ,但 又 要 能 实现 超 链接 功能 ,怎样 来 实现 呢 ? 可 
以 采用 Response. Redirect 方法 来 解决 此 问题 。 其 语法 格式 为 Response. Redirect(“ 链 接 
网 址 (URL)”)。 

5) 判断 网 页 浏览 者 是 否 处 于 断 开 状 态 

利用 Response. IsClientConnected 方法 来 判断 网 页 浏览 者 是 否 断 开 连 接 , 当 返回 的 
值 为 false 时 ,表示 网 页 浏览 者 已 断 开 连接 ,此 时 可 用 Response. End 方法 来 结束 输出 。 
代码 如 下 : 

protected void Page Load (object sender, EventArgs e) 

{ 

if (Response.IsClientConnected== false) 
{ 
Response.End() ; 


) 
) 


2. 页 面 URL 传 值 


在 开发 实 网 站 时 ,经 常会 遇 到 实现 特定 功能 时 ,需要 获取 前 一 页 关键 信息 的 问题 。 
在 本 实例 中 ,为 了 在 “显示 页 "中 显示 用 户 的 登录 名 .需要 把 “登录 页 面 * 中 的 用 户 名 ,传递 
到 “显示 页 ”。 实 现 此 功能 的 方法 很 多 ,可 以 利用 Session 对 象 进行 页 面 传 值 ,也 可 以 通过 
Response 对 象 中 的 Redirect 方法 在 跳 转 页 面 时 将 信息 传 到 指定 页 中 。Redirect 方法 用 
户 将 客户 端 定向 到 资源 的 新 位 置 。 语 法 格式 如 下 : 


public void Redirect (string url);// 其 中 url 参数 用 于 确定 目标 位 置 
利用 Response 对 象 的 Redirect 方法 实现 页 面 传 值 的 代码 如 下 : 
Response.Redirect ("NavigatePage.aspx? UserName- "+ Loginl.UserName.ToString ()); 


NavigatePage. aspx 是 跳 转 到 指定 页 面 的 地 址 ,UserName 传递 用 户 的 登录 名 变量 。 

注意 : 

(1) UserName 必须 放 在 “?” 之 后 ,在 “显示 页 ”中 必须 利用 Request. QueryString 
["UserName"] 来 接收 页 面 传 值 信息 ,如 果 有 多 个 值 ,中 间 用 & 加 以 分 割 。 

(2) 利用 Response. Redirect() 方 法 传 值 时 ,由 于 该 方法 会 把 传递 的 关键 信息 显示 在 
地 址 栏 中 ,其 保密 性 比较 差 . 因 此 使 用 时 ,需要 对 传递 的 重要 信息 进行 加 密 。 


3. Session 


一 般 称 Session 为 “会 话 ”。 这 是 什么 意思 呢 ? 举 个 例子 大 家 就 明白 了 。 去 超市 购物 
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时 ,如 果 要 买 很 多 东西 就 需要 超市 一 辆 购物 车 ,可 以 边 购物 边 把 物品 放 到 购物 车 里 ,出 去 
结账 要 回 家 时 必须 要 把 购物 车 还 给 超市 。 另 外 在 购物 时 尽量 不 要 离开 购物 车 太 长 时 间 ， 
否则 超市 工作 人 员 会 以 为 这 是 一 个 无 主 的 购物 车 而 进行 回收 。 这 个 购物 车 就 非常 类 似 
于 Session。Session 就 是 当 用 户 访问 网 站 时 ,可 以 在 服务 器 申请 一 个 内 存 ( 相 当 于 进 超市 
要 购物 车 ) ,用 户 可 以 把 相关 数据 放 到 Session 中 (购物 车 ) ,如 果 用 户 离开 网 站 ,服务 器 将 
把 用 户 的 Session( 购 物 车 ) 进 行 回收 。 

Session 语法 结构 如 下 : 


Session[" 变 量 名 "]=" 内 容 "; 
从 会 话 中 读 取 信息 的 语法 结构 如 下 : 


VariablesName= Session[" 变 量 名 "]; 


下 面 示 例 是 在 登录 页 面 Default. aspx 中 . 当 单 击 登 录 ” 按 钮 时 ,将 会 触发 Buttonl 
控件 的 Click 事件 ,在 该 事件 中 ,首先 将 页 面 首选 判断 用 户 是 否 登录 成 功 ,如 果 登 录 成 功 ， 
则 将 用 户 信 息 保存 到 Session。 其 代码 如 下 : 


protected void Buttonl Click(cbject sender, EventArgs e) 
t 
string username -this.txtName.Text.Trim(); 
string pwd -this.txtPwd.Text.Trim(); 
if (username 一 "mike" && pwd == "123") 
t 
Session["username"] -username; 
Session["pwd"] =pwd; 
Response.Redirect ("Default2.aspx"); 
//Session.Timeout ="10"; 
} 
else 
í 
Response.Write ("用 户 名 或 密码 错误 "); 
) 
} 


在 浏览 用 户 信息 页 面 时 ,可 以 通过 读 取 Session 的 值 来 判断 用 户 是 否 登录 成 功 。 其 
代码 如 下 : 


Protected void Page Load (object sender, EventArgs e) 
{ 


if (Session["username"] ! -null) 

{ 
string username — Convert.ToString (Session["username"]); 
string pwd —Convert.ToString (Session["pwd"]); 
this.Labell.Text —username; 
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this.Label2.Text —pwd; 
i 
else 
t 
Response.Redirect ("Default.aspx"); 
} 
} 


4. Cookie 


Cookie 用 于 保存 客户 浏览 器 请 求 服务 器 页 面 的 请 求 信息 ,程序 员 也 可 以 用 它 存放 非 
敏感 性 的 用 户 信息 ,信息 保存 的 时 间 可 以 根据 需要 设置 。 如 果 没 有 设置 Cookie 失效 日 
期 ,它们 仅 保存 到 关闭 浏览 器 程序 为 止 。 如 果 将 Cookie 对 象 的 Expires 属性 设置 为 
MaxValue, 则 表示 Cookie 永远 不 会 过 期 ,Cookie 存储 的 数据 量 很 受 限制 ,大 多 数 浏览 器 
支持 最 大 容量 为 4KB, 因 此 不 要 用 来 保存 数据 集 及 其 他 大 量 数据 。 由 于 并 非 所 有 的 浏览 
器 都 支持 Cookie, 并 且 数 据 信 息 是 以 明文 文本 的 形式 保存 在 客户 端的 计算 机 中 ,因此 最 
好 不 要 保存 敏感 的 ,未 加 密 的 数据 ,和 否则 会 影响 网 站 的 安全 性 。 

下 面 介 绍 如 何在 ASP.NET Web 应 用 程序 中 创建 Cookie 文本 文件 来 存储 用 户 IP 
地 址 的 登录 次 数 ,以 及 如 何 读 取 登 录 次 数 。 

1) 创建 Cookie 文本 文件 来 存储 用 户 IP 地 址 的 登录 次 数 

创建 Cookie 文本 文件 的 方法 很 多 。 可 以 通过 为 Cookies 集合 设置 Cookie 属性 编写 
Cookie, 其 代码 如 下 : 


Response.Cookies ["UserSettings"] .Value= lastVisitCounter.ToString(); 
Response.Cookies ["UserSettings"].Expires- DateTime.MaxValue; 


也 可 以 通过 创建 HttpCookie 对 象 的 实例 编写 Cookie, 其 代码 如 下 : 


HttpCookie aCookie- new HttpCookie ("lastVisitCounter"); 
aCookie.Value- lastVisitCounter.ToString(); 
aCookie.Expires- DateTime .MaxValue; 
Response.Cookies.Add (aCookie) ; 


注意 : 用 户 访 问 编写 的 Cookie 的 站 点 时 ,浏览 器 将 删除 过 期 的 Cookie, 对 于 永 不 过 
期 的 Cookie, 可 将 过 期 日 期 设置 为 从 现在 起 50 年 。 如 果 没 有 设置 Cookie 的 有 效 期 , 仍 
会 创建 Cookie, 但 不 会 将 其 存储 在 用 户 的 硬盘 上 ,而 会 将 Cookie 作为 用 户 会 话 信息 的 一 
部 分 进行 维护 。 当 用 户 关闭 浏览 器 时 ,Cookie 便 会 被 丢弃 。 

2) 读 取 用 户 的 IP 地 址 的 登录 次 数 

浏览 器 向 服务 发 去 请 示 时 .会 随 请 求 一 起 发 送 到 服务 器 的 Cookie. TE ASP. NET 应 
用 程序 中 ,可 以 使 用 HttpRequest 对 象 读 取 Cookie。 其 代码 如 下 : 

if (Request.Cookies["lastVisitCounter"] — null) 


t 
TextBoxl.Text —"1"; 
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else 


HttpCookie aCookie =Request.Cookies["lastVisitCounter"]; 
TextBoxl.Text = Server.HtmlEncode (aCookie.Value); 


} 


注意 : 

(1) 在 尝试 获取 Cookie 的 值 之 前 ,应 该 确保 Cookie 存在 ;如 果 该 Cookie 不 存在 ,将 
会 引发 NullReferenceException 异常 。 

(2) 在 显示 Cookie 的 内 容 前 , 先 调用 HtmlEncode 方法 对 Cookie 的 内 容 进行 编码 。 
这 样 可 以 确保 恶意 用 户 没 有 向 Cookie 中 添加 可 执行 脚本 。 


5. Application 


Session 对 象 可 以 记载 特定 客户 端的 信息 ,与 此 相反 的 是 ,Application 对 象 可 以 记载 
所 有 客户 信息 。 好 比 公共 储藏 柜 , 每 个 人 都 可 以 存 取 物品 。 简 而 言 之 ,不 同 的 客户 必须 
访问 不 同 的 Session 对 象 ,但 可 以 访问 公共 的 Application 对 象 。 最 典型 的 应 用 就 是 聊天 
室 , 大 家 发 言 都 存放 到 Application 信息 中 ,彼此 就 可 以 看 到 发 言 内 容 了 。 

聊天 室 框架 主页 面 代码 如 下 : 


<HIML> 

< HEAD» 
«TITLE» Application 对 象 示例 < /TITLE> 

< /HEAD> 

< FRAMESET rows="* ,60"> 
< FRAME name= "message" src- "message.aspx"» 
< FRAME name= "say" src- "say.aspx"» 

< /FRAMESET> 

< /HIML> 


保存 发 言 信息 页 面 设计 代码 如 下 : 


< SCRIPT language- "C£ " runat="server"> 
private void Enter Click(object sender,EventArgs e) 
t 
Application.Lock( ); 
Application["show"] —pronunciation.Text 4 «br» " -Application["show"]; 
Application.UnLock( ); 
pronunciation.Text- ""; // 将 发 言 框 清空 
< /SCRIPT> 
<HTML> 
<BODY> 
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< FORM runat= "server"» 
dE: «asp:textbox id- "pronunciation" columns- "30" runat- "server" /> 
«asp:button text=" A iÉ " onclick- "Enter Click" runat="server" /> 
< /FORM> 
< /BODY> 
< /HIML> 
读 取 发 言 信息 页 面 代码 如 下 : 
< SCRIPT language- "C£ " runat="server"> 
private void Page Load(object sender,EventArgs e) 
t 
message.Text- Application ["show"].ToString( ); // 获 取 Application 信息 
< /SCRIPT> 
<HIML> 
< HEAD> 


<META http- equiv- "refresh" content= "5"> 
< /HEAD> 
« BODY» 

«asp:label id- "message" runat- "server"/» 
< /BODY> 
< /HTML> 


随 着 信息 化 建设 的 日 益 深入 ,网 站 的 数量 也 日 益 增 加 。 对 于 某 些 大 型 网 站 来 说 ,网 
站 访问 量 的 统计 功能 也 显得 非常 重要 。 当 需要 评价 网 站 价值 时 ,网 站 访问 量 是 一 个 重要 
参数 。 下 面 介 绍 如何 判 断 用 户 在 线 情况 以 及 统计 网 站 的 访问 量 。 

在 Global. asax 全 局 应 用 程序 类 中 ,设置 当 应 用 程序 启动 时 初始 化 计数 器 ,代码 
WTF: 


void Application Start (object sender, EventArgs e) 
{ 
// 初 始 化 
Application["counter"] =0; 
} 


在 新 会 话 启动 时 ,实现 计数 器 加 1. 代码 如 下 : 


Void Session Start (object sender, EventArgs e) 
{ 
// 在 新 会 话 启动 时 运行 的 代码 
// 对 Application 加 锁 以 防 并 行 性 
Application.Lock(); 
// 增 加 一 个 在 线 人 数 
Application["counter"] = (int)Application["counter"] +1; 


// 解 锁 
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Application.UnLock|(); 
} 


在 会 话 结束 时 ,实现 计数 器 减 1, 代 码 如 下 : 


Void Session End (object sender, EventArgs e) 

{ 
// 对 Application 加 锁 以 防 并 行 性 
Application.Lock(); 
// 减 少 一 个 在 线 人 数 
Application["counter"] = (int)Application["counter"] -1; 
// 解 锁 
Application.UnLock(); 

) 


在 Default. aspx 第 一 次 加 载 时 ,将 Application[ "counter" ]lWt£$ Label. text. 实现 在 
界面 上 显示 在 线 人 数 ,其 代码 如 下 : 
Label2.Text- Application["counter"].ToString (); 


运行 界面 如 图 4. 18 所 示 。 


无 标题 页 - Windows Internet Explorer 
XO) 编辑 于) 查看 W) KERA IAT) 帮助 00 


Go E) http://localhost:3405/Ch2_5/ 
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RIERA 
当前 在 线 人 致 为 : 


图 4.18 统计 在 线 人 数 


注意 : 会 话 开始 和 结束 时 ,一 定 要 进行 加 锁 和 开锁 操作 ,由 于 多 个 用 户 可 以 共享 
Application 对 象 ,因此 对 共享 资源 使 用 锁定 是 必要 的 ,这 样 可 以 确保 在 同一 时 刻 只 有 一 
个 客户 可 以 修改 和 保存 Application 对 象 的 属性 。 如 果 将 共享 区 加 锁 后 , 迟 迟 不 给 开锁 ， 
可 能 会 导致 用 户 无 法 访问 Application 对 象 。 用 户 可 以 使 用 该 对 象 的 UnLock 方法 来 解 
除 锁定 。 这 样 可 以 在 保证 没有 程序 访问 的 情况 下 允许 有 一 个 客户 可 以 使 用 Application 
对 象 的 共享 区 。 本 例 主要 是 根据 用 户 建 立 和 退出 会 话 来 实现 在 线 人 数 的 增加 ,减少 的 ， 
如 果 用 户 没 有 关闭 浏览 器 ,而 直接 进入 其 他 URL., 则 这 个 会 话 在 一 定时 间 内 是 不 会 结束 
的 ,所 以 对 用 户 数 量 的 统计 存在 一 定 的 偏差 。 当 然 , 用 户 可 以 在 Web. config 文件 中 对 会 
ifi Session 的 失效 时 间 Timeout 来 设置 .默认 值 为 20min, 最 小 值 为 1min。 


6. ViewState 


通俗 来 说 ,ViewState 就 是 一 个 页 面 级 的 Session. ViewState 常用 于 保存 单个 用 户 
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的 状态 信息 ,有 效 期 等 于 页 面 的 生存 期 。ViewState 是 在 本 页 面 之 内 各 函数 间 进 行 传 值 
的 ,使 用 这 种 方法 是 因为 在 一 个 事件 发 生 之 后 ,页 面 可 能 会 刷新 , 如 果 定 义 全 局 变量 会 被 
WF. ViewState 容器 可 以 保持 大 量 的 数据 ,但 是 必须 谨慎 使 用 ,因为 过 多 使 用 会 影响 应 
用 程序 的 性 能 。 所 有 Web 服务 器 控件 都 使 用 ViewState 在 页 面 回 发 来 保存 自己 的 状态 
信息 。 如 果 某 个 控件 不 需要 在 回 发 期 间 保存 状态 信息 ,最 好 关闭 该 对 象 的 ViewState, Ñ 
免 不 必要 的 资源 浪费 。 通 过 给 @Page 指令 添加 “EnableViewState 二 false” 属 性 可 以 禁止 
整个 页 面 的 ViewState。 
例如 : 


ViewState ["color"] = "red"; 
string strColor; 
strColor - (string)ViewState ["color"]; 


7. Cache( 缓 存 ) 


缓存 就 是 将 常用 的 数据 或 对 象 保存 在 内 存 中 ,再 次 使 用 时 就 可 以 从 内 存 中 直接 调 
用 。 它 的 好 处 就 是 会 提高 速度 ,缺点 就 是 使 用 太 多 会 消耗 大 量 的 内 存 。 页 输出 缓存 就 是 
将 第 一 次 请 求 的 页 面 存储 在 内 存 中 ,以 后 再 次 请 求 时 直接 从 内 存 中 调用 。 实 现 页 缓存 方 
法 就 是 在 页 面 顶端 添加 缓存 指令 ,下 面 的 代码 演示 如 何 将 页 的 可 缓存 性 设置 为 60s: 


<$%QOutputCache Duration- "60" VaryByParam- "None"%® > 


也 可 以 只 缓存 页 面 中 部 分 内 容 , 实 现 方法 是 将 部 分 内 容 创 建 一 个 用 户 控件 ,然后 添 
加 上 述 指 令 即 可 。 如 果 想 把 数据 作为 缓存 ,就 要 用 到 Cache 类 , 它 有 点 类 似 Session 和 


Application 。 


«5*8 Import Namespace- "System.Data" $» 
«5*8 Import Namespace- "System.Data.OleDb" $> 
< SCRIPT language- "C£ " runat="server"> 
private void Page Load (object sender,EventArgs e) 
{ 
DataSet ds =new DataSet ( ); 
if (Cache ["ds"] — null) 
t 
// 如 果 缓 存 为 空 ,表示 第 一 次 请 求 , 所 以 要 生成 Dataset 对 象 
OleDbConnection conn - new OleDbConnection ("Provider- Microsoft .Jet. 
OLEDB.4.0; 
Data Source-" + Server.MapPath ("wwwlink.mdb")); 
OleDbDataAdapter adp =new OleDbDataAdapter("select * from link", conn); 
adp.Fill(ds,"link"); // 填 充 DataSet 对 象 
MyDataGrid.DataSource- ds.Tables [0] .DefaultView; // 绑 定数 据 
MyDataGrid.DataBind( ); 
Cache["ds"]- ds; // 将 DataSet 对 象 缓存 起 来 
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else 


// 再 次 请 求 时 ,直接 从 缓存 中 读 取 Dataset 对 象 即 可 

ds- (DataSet)Cache ["ds"]; // 从 缓存 中 调用 Dataset 对 象 
MyDataGrid.DataSource=ds.Tables[0] .DefaultView; // 绑 定数 据 
MyDataGrid.DataBind( ); 


) 
< /SCRIPT> 
<HIML> 
<BODY> 
<h4 align- "center"> 网 络 导航 < /h4> 
« ASP:DataGrid id- "MyDataGrid" Width- "100$ " runat="server" /> 
< /BoDY» 
< /HTML» 


在 上 节 已 经 新 建 了 一 个 ebook 网 站 ,并 完成 了 用 
户 注 册 的 功能 ,现在 在 原 有 项 目的 基础 上 ,添加 一 个 
Web 窗 体 , 完 成 用 户 登 录 功 能 。 
首先 添加 一 个 Web 窗 体 , 命 名 为 login. aspx. W [77 eam. 
面 布局 如 图 4. 19 所 示 。 图 4.19 登录 窗 体 
为 了 方便 修改 数据 库 连 接 字符 串 , 可 以 将 数据 库 
连接 字符 串 写 和 人 web. config 文件 中 。 代 码 如 下 : 


<?xml version="1.0"?> 
< configuration xmlns= "http://schemas .microsoft .com/.NetConfiguration/v2.0"> 
<appSettings> 
<add key-"conn" value="server= .Vsqlexpress; database= 网 上 书店 ; integrated 
security-true" /> 
< /appSettings > 
«€ connectionStrings/» 
< system.web» 
«compilation debug- "true"/» 
«authentication mode- "Windows"/» 
< /system.web» 


< /configuration» 


“登录 ?按钮 的 功能 是 检查 用 户 输 入 的 用 户 名 与 注册 在 数据 库 中 的 数据 是 否 相同 , 若 
相同 则 登录 成 功 ,否则 登录 失败 。“ 登 录 ” 按 钮 的 Click 事件 过 程 的 程序 代码 如 下 : 


Protected void btn Login Click (object sender, EventArgs e) 
i 
String Md5 User Pwd —FormsAuthentication.HashPasswordForStoringInConfigFile (this. txt 
User Pwd.Text.ToString(), ，"MD5");// 作 为 密码 方式 加 密 
SqlStr = "select * from 会 员 表 where 会 员 名 ='" +this.txt User Name.Text t"' and 
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密码 ='" +Md5 User Pwd &"'"; 
ds - db.GetDataTableBySql (SqlStr); 
try 
t 
if (ds.Tables[0].Rows.Count == 0) 
t 
this.Labinfo.Text =" 用 户 名 或 密码 错误 ,请 重 试 !"; 
this.txt User Name.Focus(); 
) 


else 
t 
this.Labinfo.Text = "用 户 "+this.txt_User Name.Text +" 恭喜 您 登录 
成 功 !"; 
Session["UserName"] =this.txt User Name.Text; 
} 
} 
catch (Exception) 
{ 
this.Labinfo.Text =" 没 有 得 到 任何 数据 ,请 重 试 !"; 
} 


j 


将 登录 用 户 名 保存 下 来 是 为 了 以 后 使 用 ,此 处 体现 不 出 ,在 后 面 的 章节 将 介绍 其 用 
R. H Session 变量 保存 下 来 主要 是 因为 Session 变量 有 生命 周期 ,就 像 登录 邮箱 之 后 ， 
如 果 长 时 间 没 有 操作 就 需要 重新 登录 ,这 也 是 利用 了 Session 变量 的 生命 周期 。 


4.5 MAEI) JE TH E TR R 


实现 网 站 访问 计数 器 要 用 到 Application Xf ££ Session 对 象 和 Server 对 象 。 要 真正 
实现 网 站 访问 的 计数 器 ,必须 先 将 统计 的 次 数 数据 保存 到 文件 中 ,然后 从 文件 中 读 取 ,这 
样 ,服务器 停止 之 后 重新 启动 ,原先 访问 统计 的 次 数 将 保留 下 来 ,从 而 实现 真正 的 网 站 访 
问 计 数 器 。 读 写 文件 就 要 用 到 Server 对 象 来 实现 ,要 实现 浏览 一 次 网 页 计数 器 就 增加 
1, 这 就 要 写 一 个 Page_Load 事件 ,计数 器 增加 之 后 ,就 要 将 新 的 次 数 写 入 文件 中 ,这 就 要 
写 一 个 Page Unload 事件 。 

在 项 目 ebook 文件 中 创建 一 个 命名 为 count. txt 的 文本 文件 ,输入 一 个 数字 1。 然 后 
再 添加 一 个 页 面 命名 为 web_visit_count. aspx, 该 页 面 用 于 显示 计数 。 其 Page_Load 事 
件 程序 代码 如 下 : 


protected void Page Load (object sender, EventArgs e) 
t 


if (Page.IsPostBack — false) 
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StreamReader ReadFile —File.OpenText (Server.MapPath ("count .txt") ) ; 
StringBuilder OutText —new StringBuilder (); 
String Str; 
while ((Str =ReadFile.ReadLine()) ! =null) 
t 
Application["count"] -Str; 
T 
Application.Lock(); 
Application["count"] —int.Parse (Application ["count"].ToString()) +1; 
Application.UnLock|(); 
ReadFile.Close(); 
this.labinfo.Text — Application ["count"].ToString(); 


) 
Page Unload 事件 代码 如 下 : 


protected void Page UnLoad(object sender, EventArgs e) 


t 
StreamWriter sw —File.CreateText (Server.MapPath ("count .txt")); 


Sw.WriteLine (this.labinfo.Text); 
sw.Close(); 


) 
运行 结果 如 图 4. 20 所 示 。 


无 标题 页 - 世界 之 窗 .。 ”文件 (日 ”查看 (V) 收藏 (8) IAD 帮助 (H) F = DX 
4P.Q249*» »x[ws — aj» 
+ DE ANN — 


您 是 第 2 位 浏览 者 


& 8 TE eq Qu. 
4.20 网 站 访问 计数 器 


4.6 BIHTER EU 


作为 网 上 书店 的 项 目 , 图 书信 息 查 询 是 必 不 可 少 的 一 个 模块 ,这 可 以 更 方便 地 为 用 
户 快 速 找到 自己 想 要 的 书 。 接 下 来 就 介绍 图 书信 息 查询 页 面 的 设计 。 

图 书信 息 查询 页 面 的 设计 步骤 如 下 : 在 项 目 中 添加 一 个 新 的 Web 窗 体 ,命名 为 
book search. aspx, 在 该 页 面 设 计 图 书信 息 .在 book_search. aspx 页 面 上 添加 1 个 表格 ， 
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在 表格 中 添加 1 Label 控件 、1 个 TextBox 控件 、1 个 ImageButton 控件 和 1 个 
GridView 控件 ,最 终 设计 效果 如 图 4. 21 所 示 。 


图 书信 息 查 询 

请 输入 图 书 名 称 : 搜索 

书 名 作者 na 详细 信息 
HRE HEE 教 据 六 定 详细 信息 
HRE BEIE awe 详细 信息 
irure HE ame 详细 信息 
aE SENE aee 详细 信息 
HRE HEE ae 详细 信息 


图 4.21 图 书信 息 查询 页 面 设计 


GridView 控件 的 HTML 代码 如 下 : 


<asp:GridView ID- "GridViewl" runat="server" AllowPaging- "True" AllowSorting- "True" 
CellPadding- "4" OnPageIndexChanging- "GridViewl PageIndexChanging" OnSorting- "GridViewl 
. Sorting" 

PageSize- "5" AutoGenerateColumns- "False" ForeColor- "4 333333" GridLines- "None"? 
< FooterStyle BackColor- "# 507CD1" ForeColor- "White" Font- Bold- "True" /> 

X RowStyle BackColor- "# EFF3FB" /> 

«SelectedRowStyle BackColor- "# DIDDF1" Font- Bold- "True" ForeColor- "# 333333" /> 

< PagerStyle BackColor- "# 2461BEF" ForeColor- "White" HorizontalAlign- "Center" /> 

< HeaderStyle BackColor- "# 507CD1" Font- Bold- "True" ForeColor- "White" /> 
«Columns» 

« asp:BoundField DataField- "图 书 名 " HeaderText=" 书 名 "> 

< Itemstyle Width= "250px" /> 

< /asp:BoundField> 

« asp:BoundField DataField- "作者" HeaderText- "作者 "> 

< ItemStyle Width- "100px" /> 

< /asp:BoundField» 

«asp:BoundField DataField- "ff fft " HeaderText- "价格 " SortExpression- "fti" /> 
«asp:HyperLinkField HeaderText- "if All (5 E, " Text "详细 信息 " DataNavigateUrlFields- 
"图 书 编号 " DataNavigateUrlFormatString- "bookdetails.aspx? bookid- (0)"/» 

< /Columns> 

«EditRowStyle BackColor- "&2461BF" /> 

«AlternatingRowStyle BackColor- "White" /» 

< /asp:GridView» 


这 里 重点 讲述 一 下 GridView 控件 数据 列 的 绑 定 。 通 过 GridView 控件 显示 数据 ,可 
以 使 用 其 "自动 生成 字段 ?功能 绑 定 数据 列 , 也 可 以 根据 自己 的 需要 从 数据 集中 筛选 出 要 
绑 定 的 数据 列 , 这 里 主要 介绍 根据 需要 绑 定数 据 列 。 其 操作 步骤 如 下 。 

CD 单 击 GridView 控件 右上 角 按钮 ,打开 “GridView 任务 ”窗口 。 
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(2) 在 “GridView 任务 "窗口 中 单 击 “ 编 辑 列 ”, 打 开 “ 字 段 ”" 对 话 框 ,在 “可 用 字段 ” 栏 
中 选择 “boundField”, 单 击 “ 添 加 ”按钮 ,将 可 用 字段 添加 到 “ 选 定 字段 " 栏 ,将 “自动 生成 字 
段 " 复 选 框 取消 选 定 。 

(D 对 选 定 的 字段 进行 编辑 , 主要 设置 其 DataField 属性 、HeaderText 属性 和 
ItemStyle 属性 中 的 Width 属性 ,其 中 DataField 属性 是 设置 要 绑 定 的 字段 名 ,其 值 设 置 
为 数据 集中 的 某 一 字段 名 ,HeaderText 属性 是 设置 显示 数据 时 的 表 头 行 名 称 ( 列 标题 )， 
Width 属性 是 设置 该 数据 列 所 占 的 宽度 。 其 列 绑 定 最 终 效果 如 图 4. 22 所 示 。 


o 


JAFRA: 
『 国 BoundField 

E CheckBoxField 

|- A HypertinkField 
-E Imagefield 
加 Buttonfield 

BE] CommandField 

L TemplateField 


A 4.22 GridView 控件 数据 列 的 绑 定 


(4) 编辑 超 链接 列 ,在 “可 用 字段 " 栏 中 选择 HyperLinkField , 单 击 * 添 加 ”按钮 ,将 可 
用 字段 添加 到 “ 选 定 字 段 " 栏 ,在 超 链接 列 中 设置 其 HeaderText 为 “详细 信息 ”,Text Jii 
性 值 为 “详细 信息 ”; DataNavigateUrlFields 属性 为 绑 定 到 超 链 接 需 要 传递 参数 是 要 用 到 
的 数据 字段 名 ,其 值 为 “图 书 编 号 ”; DataNavigateUrlFormatString 属性 为 设置 绑 定 到 超 
链接 时 所 要 使 用 的 格式 ,其 值 为 “bookdetails. aspx? bookid 王 10}”;bookdetails. aspx 为 
图 书信 息 详细 页 面 (在 后 面 介绍 ) 。 超 链接 列 属性 设置 效果 如 图 4. 23 所 示 。 

(5) 编辑 列 完成 后 , 单 击 “确定 "按钮 。 

利用 GridView 控件 输出 后 台数 据 库 中 的 图 书信 息 。 要 使 GridView 控件 在 浏览 页 
面 加 载 就 显示 数据 .所 以 绑 定数 据 的 代码 应 写 在 Page Load 事件 过 程 中 。 打 开 Web 页 
面 bookdetails search 的 设计 视图 ,然后 双击 页 面 任何 一 个 空白 的 位 置 打开 代码 编辑 窗 
O ,在 代码 编辑 窗口 中 输入 以 下 程序 代码 。 

String Sqlstr; 


DB db =new DB () 7 
DataSet Ds =new DataSet () 7 


可 用 字段 (A): 
BoundField <^ 
il CheckBoxfield 
Kl HyperlinkField 
ig] ImageField 
x] ButtonField 
SE] CommandField 
加 TemplateField - DataNavigateUrlFielc 图 书 编号 
DataNavigateUrlForr bookdetails aspx?bookid = 
DataTextField | 


回 自动 生成 字段 (G) 


图 4.23 编辑 超 链接 列 


protected void Page Load (object sender, EventArgs e) 
t 
SqlStr = "select * from 图 书 表 "; 
Ds =db.GetDataTableBySql (SqlStr) 7 
try 
{ 
if (Ds.Tables [0] .Rows .Count ! =0) 
{ 
this.GridViewl.DataSource =Ds.Tables[0] .DefaultView; 
this.GridViewl.DataBind(); 


} 
catch (Exception) 
i 
Response.Write("<SCRIPT>alert(" 没 有 获得 任何 数据 ,请 检查 !…)</SCRIPT> "); 


} 


根据 输入 的 图 书 名 称 查 询 图 书信 息 , 这 里 的 查询 可 以 进行 模糊 查询 ,也 就 是 说 只 输 
和 人 书 名 的 一 部 分 也 能 查询 出 图 书信 息 ,“ 搜 索 ” 按 钮 的 Click 事件 过 程 的 代码 如 下 : 


// 图 书信 息 查询 事件 
protected void search img btn Click(object sender, ImageClickEventArgs e) 
t 
SglStr -"select * from 图 书 表 where 图 书 名 like '$"«this.book name txt.Text &"$ '"; 
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Ds -db.GetDataTableBySql (SqlStr); 


try 
( 


if (Ds.Tables[0].Rows.Count ! —0) 


t 


) 


this.GridViewl.DataSource = Ds.Tables[0].DefaultView; 
this.GridViewl.DataBind(); 


catch (Exception) 


{ 


Response.Write ("< SCRIPT» alert (' 没 有 获得 任何 数据 ,请 检查 !')< /SCRIPT> "); 


} 


利用 GridView 控件 显示 数据 是 其 最 基本 的 功能 ,GridView 控件 还 可 以 进行 分 页 ， 
将 GridView 控件 的 AllowPaging 属性 设置 为 True,PageSize 属性 设置 为 5, 这 些 属性 设 
置 完 后 GridView 控件 可 以 显示 分 页 的 形式 ,但 不 能 真正 实现 分 页 ,要 实现 分 页 功能 还 需 
要 编写 其 PageIndexChanging 事件 。 选 择 GridView 控件 .在 “属性 ”窗口 中 单 击 “ 事 件 ” 


按钮 ,打开 事件 列表 ,找到 PageIndexChanging 事件 ,其 代码 如 下 : 


//GridView 分 页 事件 
protected void GridViewl PageIndexChanging (object sender, 


GridViewPageEventArgs e) 


{ 


if (this.book name txt.Text —"") 


t 


SglStr -"select * from ABK"; 
Ds - db.GetDataTableBySql (SqlStr); 
try 
t 
if (Ds.Tables[0].Rows.Count ! =0) 
t 
this.GridViewl.DataSource - Ds.Tables[0].DefaultView; 
this.GridViewl.PageIndex -e.NewPageIndex; 
this.GridViewl.DataBind(); 


} 
catch (Exception) 
{ 


Response.Write ("< script>alert (' 没 有 获得 任何 数据 ,请 检查 !') 
« /script»"); 
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else 


SqlStr -"select * from 图 书 表 where ABA like '$" +this.book name txt. 
Text.ToString ().Trim () + "多 
Ds —db.GetDataTableBySgl (SqlStr); 
try 
t 
if (Ds.Tables[0].Rows.Count ! =0) 
t 
this.GridViewl.DataSource - Ds.Tables[0].DefaultView; 
this.GridViewl.PageIndex -e.NewPageIndex; 
this.GridViewl.DataBind(); 


) 

catch (Exception) 

{ 
Response.Write ("< SCRIPT> alert (' 没 有 获得 任何 数据 ,请 检查 !') 
< /SCRIPT» ") 7 


} 


GridView 控件 除了 可 以 分 页 还 可 以 实现 排序 功能 ,将 DataGrid 控件 中 的 
AllowSorting 属性 设 为 True, 完 成 其 Sorting 事件 就 可 以 实现 排序 。 

在 编写 Sorting 事件 之 前 ,首先 在 GridView 控件 数据 列 的 绑 定 对 话 框 中 设 定 要 排序 
的 表达 式 , 在 图 书信 息 查询 页 面 中 对 价格 实现 排序 ,在 “ 选 定 的 字段 " 栏 中 选中 “价格 ” 字 
段 ,设置 其 SortExpression 属性 的 值 ,其 设置 结果 如 图 4. 24 所 示 。 

编写 Sorting 事件 ,其 程序 代码 如 下 : 


//Gridview 排序 事件 
protected void GridViewl Sorting (object sender, GridViewSortEventArgs e) 
t 
if (this.book name txt.Text =—"") 
t 
SglStr -"select * from ABK"; 
Ds -db.GetDataTableBySql (SqlStr); 
try 
{ 
if (Ds.Tables[0].Rows.Count ! =0) 
t 
DataTable Dtemp — new DataTable(); 
Dtemp =Ds.Tables [0]; 
Dtemp.DefaultView.Sort =e.SortExpression; 
this.GridViewl.DataSource =Dtemp; 


可 用 字段 (A): 


T BoundField 
-E CheckBoxField 
-局 HyperLinkField 

G] ImageField 
dX] ButtonField 


ApplyFormatInEditM False 


ConvertEmptyString] True. 


HtmlEncode 
HE] CommandField mats Ti 
L- TemplateField 


选 定 的 字段 (S): 


osa 
国 作 者 
Bs 
用 详细 信息 


加 自动 生 成 字段 (G) 


} 


图 4.24 排序 


this.GridViewl.DataBind(); 


catch (Exception) 


{ 


else 


SglStr ="select * from 图 书 表 where 图 书 名 like '$" +this.book name - 


Response.Write ("< SCRIPT> alert (' 没 有 获得 任何 数据 ,请 检查 !') 
</SCRIPT>"); 


txt.Text.ToString().Trim() +"%'"; 
Ds =db.GetDataTableBySql (SqlStr)7 


try 
{ 


if (Ds.Tables[0].Rows.Count ! =0) 


{ 


DataTable Dtemp =new DataTable(); 

Dtemp =Ds.Tables [0]; 
Dtemp.DefaultView.Sort =e.SortExpression; 
this.GridViewl.DataSource =Dtemp; 
this.GridViewl.DataBind(); 


zO* xr 的 网 上 书城 。 191 


catch (Exception) 

{ 
Response.Write ("< SCRIPT» alert (' 没 有 获得 任何 数据 ,请 检查 !') 
< /SCRIPT» "); 


4.7. BITE R SH Yr 3R Sc 


为 了 吸引 用 户 的 眼球 ,如 果 图 书展 示 页 面 还 是 以 表格 形式 展示 就 太 普通 了 ,为 了 更 
好 地 展示 图 书 , 现 以 图 文 方式 展示 图 书信 息 。 

图 书展 示 页 面 的 设计 步骤 如 下 : 在 项 目 中 添加 一 个 新 的 Web 窗 体 ,命名 为 book. 
show. aspx, 设 计 图 书展 示 页 面 , 在 book show. aspx 页 面 上 添加 1 个 表格 ,在 表格 中 添加 
1 个 Label 控件 、1 个 DataList 控件 ,最 终 设 计 效 果 如 图 4. 25 所 示 。 


SEHE  HIRHE 数据 绑 定 WERE 


DSi 


4.085 图 书展 示 页 面 设计 


DataList 控件 的 HTML 代码 如 下 。 


«asp:DataList ID- "DataListl" runat- "server" RepeatColumns- "4" > 

<ItemTemplate> 

« TABLE» 

<TR> 

<TD width= "110" valign="top" height="112"> 

<A href = ' bookdetails.aspx? bookid- <% # DataBinder.Eval (Container. DataItem," 图 书 编 
be ae E Paa 

< img width =80 height =110 src = '< $% # DataBinder.Eval (Container.DataItem, "图 片 ") $> ">< 
/R> 

</TD> 

</TR> 


192 


49. «22552 


<TR> 
<TD width= "110" valign="top" height= "50"> 


<A href = ' bookdetails.aspx? bookid= « € # DataBinder.Eval (Container. DataItem," 图 书 编 


号 ")$>'> 


«$4 DataBinder.Eval (Container.DataItem, "图 书 名 ") $>< /A> 


</TD> 

</TR> 

< /TABLE> 
</ItemTemplate> 
< /asp:DataList> 


这 里 为 图 书 名 和 图 片 内 容 添 加 了 超 链接 。bookdetails. aspx 为 图 书 详细 信息 页 面 。 
代码 “二 a href— bookdetails. aspx? bookid— — Eval(" 图 书 编号 ")% 二 全 ”功能 为 连接 
到 图 书 详细 信息 页 面 ,通过 bookid 参数 传递 当前 记录 的 图 书 编号 。 


图 书展 示 页 面 只 能 展示 图 书 的 部 分 信息 .如 果 用 
户 想 更 加 详细 地 了 解 图 书信 息 , 则 可 以 通过 单 击 图 书 
展示 页 面 上 的 图 书 图 片 或 图 书 名 就 显示 图 书 详细 
信息 。 

图 书 详细 信息 页 面 的 设计 步骤 如 下 : 在 项 目 中 添 
加 一 个 新 的 Web 窗 体 ,命名 为 bookdetails. aspx, 设 
计 图 书展 示 页 面 ,在 bookdetails. aspx 页 面 上 添加 1 
个 表格 ,在 表格 中 添加 1 个 Label 控件 、1 个 Repeater 
控件 和 1 个 ImageButton 控件 ,最 终 设计 效果 如 
图 4. 26 所 示 。 

Repeater 控件 的 HTML 代码 如 下 : 


<asp:Repeater ID- "Repeaterl" runat- "server"> 
<ItemTemplate> 
<TABLE> 
<TR> 


图 书 详细 资料 


字数 ， 数 据 绑 定 
版 次 ， 数 据 绑 定 


图 4.26 图 书 详细 资料 页 面 设计 


<TD colspan-"3"»«$ £Eval ("图 书 名 ") $»« /TD> 


</TR> 
<TR> 


<TD rowspan= "5">< img src= "<%#Eval ("H") $>" />< /TD> 


<TD> 作 者 : <$#Eval ("作者 ") %>< /TD> 
</TR> 
<TR> 
<TD> 价 格 : <% 4Eval ("价格 ") $»«/TD» 
</TR> 
<TR> 
<TD> 印 张 : <% #Eval ("印张 " )%>< /TD> 
</TR> 
<TR> 
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<TD> 字 数 : <$#Eval (" 字 数 ") $>< /TD> 
</TR> 

<TR> 

<TD> 版 次 : <% #Eval ("版 次 ") %$>< /TD> 
</TR> 

< /TABLE> 

</ItemTemplate> 

< /asp:Repeater» 


图 书展 示 页 面 已 经 设计 好 了 ,现在 来 实现 图 书展 示 功 能 。book_show. aspx 页 面 的 
Page Load 事件 的 程序 代码 如 下 : 


protected void Page Load (object sender, EventArgs e) 
t 
if (Page.IsPostBack == false) 
t 
SqlStr -"select * from ABK"; 
Ds - db.GetDataTableBySql (SqlStr); 
try 
t 
if (Ds.Tables[0].Rows.Count ! =0) 
{ 
this.DataListl.DataSource =Ds.Tables [0] .DefaultView; 
this.DataListl.DataBind(); 
) 
) 
catch (Exception) 
t 
Response.Write ("< script>alert (' 没 有 获得 任何 数据 ,请 检查 !') 
« /script»"); 


) 


运行 结果 如 图 4.27 所 示 。 

查看 图 书 详细 信息 的 页 面 已 经 设计 好 了 .现在 来 实现 其 功能 。 实 现 其 功能 的 原理 
是 , 当 单 击 图 书展 示 页 面 上 的 某 一 本 图 书 的 名 称 或 图 片 时 就 显示 该 图 书 的 详细 信息 ,也 
就 是 说 要 从 图 书展 示 页 面 上 传 一 个 图 书 编号 到 查看 图 书 详细 页 面 ,在 查看 图 书 详细 页 面 
上 根据 传 过 来 的 图 书 编号 进行 查询 ,将 查询 到 的 图 书 的 详细 信息 显示 。 下 面 来 看 其 具体 
实现 。 

查看 图 书 详细 信息 的 程序 代码 如 下 : 

public partial class bookdetails : System.Web.UI.Page 


1 
String SqlStr; 
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[ET ZÐ 8V 5m) IAD WE F-X 
1D. @ $$ Ak [Dr -e)la [n arez qa] > 


图 书信 息 展示 


& 9 RE EL en qo Q 100€ - 
图 4.27 图 书信 息 展示 


DataSet Ds =new DataSet (); 

DB db =new DB(); 

String Book ID; 

protected void Page Load (object sender, EventArgs e) 


if (Page.IsPostBack == false) 
{ 
Book ID -Request.QueryString.Get (0) .ToString () .Trim (); 
sqlstr ="select * from 图 书 表 where 图 书 编号 ="+Book_ID; 
Ds =db.GetDataTableBySql (SqlStr); 
try 
{ 
if (Ds.Tables[0] .Rows.Count ! =0) 
{ 
this.Repeaterl.DataSource =Ds.Tables [0] .DefaultView; 
this.Repeaterl.DataBind(); 
Session["book id"] =Book ID; 


} 

catch (Exception) 

{ 
Response.Write ("< SCRIPT» alert ("没有 获得 任何 数据 ,请 检查 !') 
< /SCRIPT» "); 
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} 


当 在 图 书展 示 页 面 上 单 击 (Java 程序 宝典 ) 图 书 的 图 片 时 ,图 书 详细 信息 页 的 显示 结 
果 如 图 4. 28 所 示 。 
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图 4.28 图 书 详细 资料 


BIR ASP. NET 服务 器 控件 提供 了 大 量 功能 ,但 它们 并 不 能 涵盖 每 一 种 情况 ,不 能 
完全 满足 程序 设计 人 员 的 所 有 要 求 。 在 ASP. NET 中 ,可 以 制作 自己 的 控件 ( 自 定义 控 
件 ) ,以 方便 程序 的 设计 ,使 用 用 户 自 定 义 控 件 的 另 一 个 优点 是 能 够 保证 各 页 面 的 相同 内 
容 一 致 。 一 个 用 户 自 定义 控件 与 一 个 完整 的 Web 窗 体 页 相似 ,它们 都 包含 一 个 用 户 界 
面 页 和 一 个 代码 隐藏 文件 。 

在 浏览 网 页 时 不 难 发 现 , 许 多 网 页 的 最 上 面部 分 与 最 下 面部 分 基本 都 相同 , 像 这 种 
要 应 用 于 多 个 页 面 的 内 容 , 就 可 以 先 定义 为 自 定 义 控 件 , 然 后 在 其 他 页 面 中 直接 引用 即 
可 。 用 户 自 定义 控件 只 要 设计 一 次 .可 以 多 次 引用 ,这 样 可 以 简化 程序 员 设计 页 面 的 工 
作 量 ,也 可 以 保证 内 容 的 一 致 性 。 

在 项 目 中 增加 一 个 “Web 用 户 控件 ,命名 为 copyright_usercontrol. ascx, 该 页 面 是 
一 个 版 权 信息 页 面 ,任何 一 个 网 站 在 页 面 的 最 下 方 都 有 一 个 版 权 信息 的 内 容 , 为 了 保证 
站 点 中 的 、 各 页 面 的 版 权 信 息 一 致 , 现 将 版 权 信 息 设计 为 自 定义 控件 ,如 图 4. 29 所 示 。 


首页 ]  £üeumE ”| KASBI |] ”后 各 管 理 
Copyright © 2008~ 2012 网 上 书店 版 权 所 有 


图 4.29 版 权 信息 自 定义 控件 
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该 自 定义 控件 的 HTML 代码 如 下 所 示 : 


<%Q@Control language- "C£ " AutoEventWireup- "true" CodeFile="copyright _ 
usercontrol.ascx.cs" Inherits- "copyright usercontrol" $> 
<DIV style- "text-align: center"» 
< TABLE border- "0" cellpadding- "0" cellspacing- "0" style="width: 800px"» 
«TR» 
«TD style- "height: 20px"» 
</TD> 
</TR> 
<TR> 
<TD align="center" style="font- size: 12px"> 
<asp:HyperLink id= "HyperLinkl" runat- "server" NavigateUrl- 
"default. aspx" Target -" blank" > 首页 «/asp: HyperLink > &nbsp; &nbsp; | 
&nbsp; &nbsp; 
< asp: HyperLink id-"HyperLink2" runat="server" NavigateUrl-" 
shopcar.aspx" Target-" blank"> 我 的 购物 车 < /asp: HyperLink» &nbsp; 
&nbsp; | &nbsp; &nbsp; 
«a href- "mailto:dlutwindowse 163.com"> 联 系 管理 员 < /a> &nbsp; &nbsp; 
| &nbsp; &nbsp; 
«asp:HyperLink id- "HyperLink3" runat- "server" NavigateUrl- "admin 
login.aspx" Target-" blank"> 后 台 管 理 < /asp:HyperLink» 
</TD> 
</TR> 
<TR> 
<TD style="height: 15px"> 
</TD> 
</TR> 
<TR> 
<TD style="font- size: 12px; height: 19px" align="center"> 
Copyright 92008— 2012 网 上 书店 版 权 所 有 < /TD> 
</TR> 
<TR> 
<TD> 
« /TD» 
</TR> 
< /TABLE> 
« /DIV» 


任何 一 个 网 站 都 会 有 一 个 导航 栏 , 通 过 导航 栏 可 以 到 达 网 站 的 任何 一 个 页 面 , 接 下 
来 介绍 导航 栏 的 自 定 义 控件 。 

在 项 目 中 增加 一 个 “Web 用 户 控 件 ”, 命 名 为 navigation usercontrol. ascx, 该 页 面 
一 个 导航 栏 页 面 ,设计 如 图 4. 30 所 示 。 

HTML 部 分 如 下 所 示 : 


并 
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Can me ee | 代理 [irewi 
图 4.30 导航 栏 自 定义 控件 


<%@ Control language- "C£ " AutoEventWireup- "true" CodeFile- "navigation | 
usercontrol.ascx.cs" Inherits- "navigation usercontrol" $> 
< TABLE border- "0" cellpadding- "0" cellspacing- "0" style="width: 800"» 
<TR> 
<TD style="height: 19px; width: 50px; "> 
</TD> 
<TD style="width: 30px; height: 19px; font- size: 12px;"> 
<A href= "Default .aspx" target="_self" > 首页 </R>< /TD> 
<TD style="height: 19px; width: 10px; "> 
1< /TD> 
«TD style="height: 19px; width: 60px; font-size: l2px;"» 
<A href= "register.aspx" target- "main" > 用 户 注册 < /A>< /TD> 
«TD style="height: 19px; width: 10px;"> 
</TD> 
<TD style="height: 19px; width: 45px; font- size: 12px; "> 
<A href= "shopcar.aspx" target- "main" > 购物 车 </a> < /TD> 
«TD style="height: 19px; width: lOpx;"» 
</TD> 
<TD style="height: 19px; width: 60px; font- size: 12px; "> 
<A href= "order.aspx" target- "main"> 结 算 管理 < /A>< /TD> 
«TD style-"height: l9px; width: 10px;"> 
</TD> 
<TD style="height: 19px; width: 60px; font- size: 12px; "> 


<A href="order_search.aspx" target- "main" > 订单 查询 < /A» « /TD> 


«TD style="height: 19px; width: 455px;"» 
«/TD» 
</TR> 
< /TABLE> 


在 项 目 中 增加 一 个 “Web 用 户 控件 ”, 命 名 为 book show. usercontrol. ascx, 该 页 面 是 
一 个 图 书展 示 的 自 定义 控件 ,设计 如 图 4. 31 所 示 。 


其 HTML 部 分 如 下 所 示 : 


«$8 Control language- "C£ " AutoEventWireup- "true" CodeFile- "book show 
usercontrol.ascx.cs" Inherits- "book show usercontrol" $5» 

« TABLE border- "0" cellpadding- "0" cellspacing- "0" style- "width: 500px"» 
<TR> 

<TD> 

</TD> 

</TR> 

<TR> 
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图 4.31 图 书展 示 的 自 定义 控件 


<TD align="left"> 

<asp:DataList ID- "DataListl" runat="server" RepeatColumns- "4" > 
< ItemTemplate^ 

< TABLE» 

<TR> 

<TD width= "110" valign="top" height= "112"> 

<A href = 'bookdetails.aspx? bookid=< $% # Eval ("图 书 编号 ")%>'> 
«img width =80 height =110 src = '«$ Eval (" 图 片 ") $> '»«/A» 
</TD> 

</TR> 

<TR> 

<TD width= "110" valign="top" height= "50"> 

<A href = 'bookdetails.aspx?bookid-«$ # Eval ("图 书 编号 ")%>'> 
«S4 Eval (" 图 书 名 ") ></A> 

</TD> 

</TR> 

< /TABLE> 

</ItemTemplate> 

< /asp:DataList>< /TD> 

« /TR» 

< /TABLE» 


在 项 目 中 增加 一 个 “Web 用 户 控件 ”, 命 名 为 login_ 
usercontrol. ascx, 该 页 面 是 一 个 用 户 登 录 自 定义 控件 ， 
设计 如 图 4. 32 所 示 。 

主页 即 浏览 项 目 时 打开 的 第 1 个 页 面 . 它 也 是 整个 
网 站 的 入口 ,网 上 书店 已 经 介绍 了 大 部 分 功能 ,再 加 上 
这 些 自 定义 控件 ,现在 介绍 网 上 书店 主页 的 设计 。 网 上 
书店 主页 浏览 效果 如 图 4. 33 所 示 。 


图 4.32 用 户 登 录 自 定义 控件 
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网 上 书店 。 网 上 书店 为 您 提供 各 类 图 书 网 上 服务 | 


CHEERS. ggss canta genoms 
101: M. 


图 4.33 网 上 书店 主页 


网 上 书店 主页 的 设计 步骤 如 下 。 

(1) 打开 ebook 网 站 ,并 打开 Default. aspx 页 面 。 

(2) 在 Default. aspx 页 面 , 插 入 1 个 7 行 1 列 的 表格 ,在 第 1 行 插入 1 个 1 行 2 列 的 
KERK ,并 设置 第 1 个 单元 格 的 宽度 为 220 像素 ,第 2 个 单元 格 的 宽度 设置 为 580 f$ 
素 , 分 别 插入 image 控件 并 设置 其 URL 属性 。 

(3) 将 表格 的 第 2 行 设 置 为 分 隔 符 ,设置 其 height 为 3px, background-color 为 
E cccecc. 

(4) 在 表格 的 第 3 行 插入 导航 栏 自 定义 控件 。 

C5) 将 表格 的 第 4 行 设 置 为 分 隔 符 , 属 性 设置 同 第 (3) 步 。 

(6) 在 表格 的 第 5 行 插入 1 个 1 行 3 列 的 伐 套 表格 ,在 艇 套 表格 的 第 1 个 单元 格 搬 
入 1 个 3 行 1 列 的 表格 ,其 效果 如 图 4.34 所 示 。 

将 第 2 个 单元 格 设置 为 分 隔 符 ,在 第 3 个 单元 格 插入 如 下 浮动 框架 代码 : 


«iframe name- "main" width- "555" height- "500" src= "book show.aspx">< /iframe> 


CD 将 表格 的 第 6 行 设 置 为 分 隔 符 , 属 性 设置 同 第 (3) 步 。 
CD 在 表格 的 第 7 行 插入 版 权 信息 自 定 义 控件 。 


4.8 购物 车 模块 


到 超市 去 购物 ,都 会 拿 一 个 购物 车 来 临时 放置 购买 的 物品 。 购 物 车 用 来 存放 客户 购 
买 的 物品 ,简单 地 说 就 是 用 一 个 数据 显示 控件 显示 数据 ,本 系统 的 购物 车 是 用 一 个 


图 4.34 主页 登录 区 和 友情 链接 区 


DataList 控件 来 实现 的 。 

购物 车 页 面 的 设计 步骤 如 下 。 

(1) 打开 ebook 网 站 ,新 建 一 个 shopcar. aspx 页 面 。 

(2) 设计 购物 车 页 面 ,在 shopcar. aspx 页 面 上 添加 1 个 表格 ,在 表格 中 添加 1 个 
Label 控件 1 个 DataList 控件 、1 个 TextBox 控件 的 3 个 按钮 ,最终 设 计 效 果 如 图 4. 35 
所 示 。 


jani eram || mr] 
fani eram || mrs] 


[su ezne | m| 
[su exse | m| 
[su exse | r| 


总 金额 : 继续 购物 |。 清空 购物 车 “| 结算 中 心 


图 4.35 购物 车 页 面 设计 
DataList 控件 的 HTML 代码 如 下 : 


<asp:DataList ID-"DataListl" runat="server" OnDeleteCommand- "DataListl DeleteCommand" 
DataKeyField-" [f| $ 编 =" OnUpdateCommand =" DataListl _ UpdateCommand" BackColor =" 
LightGoldenrodYellow" BorderColor- "Tan" BorderWidth- "1px" CellPadding- "2" ForeColor-" 
Black"» 

«HeaderTemplate > 

<TABLE border- "1"» 
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<TR> 
<TD> 图 书 编号 < /TD> 
<TD> 图 书 名 称 < /TD> 
<TD> 价 格 < /TD> 
<TD> 数 量 < /TD> 
<TD> 修 改 数量 < /TD> 
<TD> 删 除 < /TD> 
</TR> 
< /HeaderTemplate> 
<ItemTemplate> 
<TR> 
<TD><%  Eval ("图 书 编号 ") %$>< /TD> 
<TD><%#Eval ("图 书 名 ") $»« /TD> 
«TD» «$ & Eval ("价格 ") %>< /TD> 
< TD» < asp: TextBox ID="count" runat="server" Text = '< $ #Eval ("数量 ") %>" Width=" 
30">< /asp:TextBox>< /TD> 
< TD» < asp: Button ID="Mod" runat -"server" Text =" 修 改 数量 " CommandName =" 
Update"/>< /TD> 
< TD» < asp: Button ID="Del" runat -"server" Text =" 删 除 " CommandName = 
"Delete"/»« /TD» 
</TR> 
</ItemTemplate> 
< FooterTemplate> < /TABLE» < /FooterTemplate> 
<FooterStyle BackColor- "Tan" /> 
< SelectedItemStyle BackColor- "DarkSlateBlue" 
ForeColor= "GhostWhite" /> 
<AlternatingItemStyle BackColor= 
"PaleGoldenrod" /> 
<HeaderStyle BackColor= "Tan" Font- Bola- "True" /> 
< /asp:DataList> 


语句 “过 asp: TextBox ID= "count" runat="server" Text ='<% # Eval "$r" 4" 
Width="30"></asp: TextBox >” Æ DataList 控件 中 绑 定 一 个 文本 框 控件 ,用 于 接受 
修改 数量 。 

语句 “一 asp:Button ID— "Mod" runat — "server" Text 一 "修改 数量 " CommandName = 
"Update/">” H DataList 控件 中 绑 定 一 个 触发 修改 数量 事件 的 按钮 控件 ,注意 其 
CommandName 属性 的 设置 。 

语句 “一 asp:Button ID 二 "Del" runat= "server" Text 二 "删除 " CommandName— 
"Delete/">” H DataList 控件 中 绑 定 一 个 触发 事件 的 按钮 的 控件 。 

购物 车 页 面 在 系统 中 必须 是 网 站 会 员 才 能 浏览 的 ,因此 在 编写 其 事件 时 也 假设 是 从 
其 他 页 面 链接 过 来 的 。 在 购物 车 页 面 的 程序 中 用 到 了 两 个 方法 ,这 两 个 方法 的 代码 在 本 
页 面 中 经 常 要 用 到 ,这 两 个 方法 分 别 是 数据 绑 定 方法 和 计算 总 金额 方法 。 
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l. 编写 数据 绑 定 方法 的 代码 


数据 绑 定 的 代码 在 前 面 已 经 用 过 ,为 了 避免 重复 写 代 码 . 因 此 把 它 定义 为 一 个 方法 ， 
其 名 称 为 DataListBind, 其 代码 如 下 : 


// 绑 定数 据 方法 
public void DataListBind() 
t 
SglStr -"select * from 购物 车 视图 where 会 员 名 = '" -Session["Username"] +"'"; 
Ds -db.GetDataTableBySql (SqlStr) ; 
try 
t 
this.DataListl.DataSource - Ds.Tables[0].DefaultView; 
this.DataListl.DataBind(); 
) 
catch (Exception) 
t 
Response.Write ("< script>alert(' 没 有 得 到 数据 ,请 重 试 !')< /script>"); 


2. 编写 计算 总 金额 方法 的 代码 


// 计 算 总 金额 
public void total money () 
t 
SglStr -"select * from 购物 车 视图 where 会 员 名 = '" - Session["Username"] +"'"; 
Ds - db.GetDataTableBySq]l (SqlStr); 
try 
t 
if (Ds.Tables[0].Rows.Count ! =0) 
t 
Double price, sum =0; 
int count; 
for (int i =0; i <Ds.Tables [0] .Rows.Count; i++)// 通 过 循环 得 到 总 金额 
{ 
price =Double.Parse (Ds.Tables [0] .Rows [i] [" 价 格 "] .Tostring ()); 
count =int.Parse (Ds.Tables [0] .Rows [i] [" 数 量 "] .Tostring()); 
sum --price * count; 
l; 
this .total money txt.Text —sum.ToString(); 


} 
catch (Exception) 
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Response.Write ("< script>alert(' 没 有 得 到 数据 ,请 重 试 !')< /script» "); 


3. 编写 Page Load 事件 过 程 的 代码 


购物 车 页 面 的 Page_Load 事件 主要 完成 将 当前 会 员 选 中 的 商品 信息 添加 到 购物 车 
并 且 将 当前 会 员 的 所 有 购物 信息 显示 出 来 ,要 实现 这 个 功能 ,首先 要 判断 会 员 是 否 登 录 。 
其 次 要 判断 会 员 所 选中 的 商品 在 购物 车 中 是 否 已 经 存在 ,最 后 将 所 有 购物 信息 显示 。 其 
代码 如 下 : 


Protected void Page Load (object sender, EventArgs e) 
t 

if (Page.IsPostBack — false) 

t 
//Session["Username"] - "ning"; 
if (Session["Username"] ! =null)// 判 断 用 户 是 否 登 录 
t 

if (Session["book id"] ! =null)// 判 断 用 户 是 从 购买 页 面 进入 购物 车 还 是 直 
接 进 购物 车 


// 判 断 购物 车 中 是 否 已 经 有 此 产品 
SglStr = "select * from 购物 车 表 where 会 员 名 = '" + Session 
["Username"] * "' and 图 书 编号 ='" +Session["book id"] +"'"; 
Ds - db.GetDataTableBySql (SqlStr); 
try 
t 
if (Ds.Tables[0].Rows.Count !=0)// 若 购物 车 有 此 产品 则 提示 用 户 
I 
Response.Write ("< script» alert(' 你 已 经 挑选 了 此 产品 ,只 要 
更 改 数量 就 行 !')< /script>"); 
} 
else// 若 购物 车 没有 此 产品 则 将 此 产品 的 相关 信息 插入 购物 车 
t 
SglStr = "insert into WHER (会 员 名 ,图 书 编号 ,数量 ) 
values ('" + Session [" Username"] + " ', '" + Session 
["book id"] «"',1)"; 
Boolean Insert Result; 
Insert Result -db.UpdateDataBySql (SqlStr); 


} 
catch (Exception) 
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} 


Response.Write ("< script> alert ("没有 得 到 数据 ,请 重 试 !') 
</script>"); 
} 
} 
DataListBind();// 绑 定数 据 
total money();// 计 算 价格 


Response Redirect ("Error.aspx"); 


有 时 想 多 买 几 件 某 商品 ,在 现实 生活 中 可 以 直接 多 拿 几 件 商品 就 行 ,而 在 网 上 购物 
时 就 不 能 直接 拿 商 品 了 ,必须 修改 购物 车 中 商品 的 数量 ,也 就 是 更 新 购物 车 。 接 下 来 介 
绍 修改 购物 车 中 商品 的 数量 与 删除 购物 车 中 的 数据 。 

更 新 购物 车 数据 就 是 修改 购物 数量 , 即 完成 “修改 数量 "按钮 的 功能 ,在 前 面 介 绍 购 
物 车 页 面 设计 时 就 提 到 了 “修改 数量 ”按钮 的 CommandName 属性 为 Update, 即 触发 修 
改 事件 ,所 以 要 编写 DataList 控件 的 DataListl _UpdateCommand 事件 ,其 程序 代码 


WF: 


protected void DataListl UpdateCommand (object source, DataListCommandEventArgs e) 


t 


) 


String book id -this.DataListl.DataKeys [e.Item.ItemIndex].ToString(); 
TextBox count = (TextBox) this.DataListl.Items [e. Item. ItemIndex]. FindControl (" 
count"); 
SqlStr = "update 购物 车 表 set 数量 = '" + count. Text 4 "' where 图 书 编号 = '" +book id 
*"' and 会 员 名 ='" +Session["Username"] *"'"; 
Boolean Update Result; 
Update Result —db.UpdateDataBySql (SqlStr); 
if (Update Result 一 true) 
t 
Response.Write ("< script» alert ("数量 修改 成 功 !')< /script» ") ; 
DataListBind();// 绑 定数 据 
total money() 7// 计 算 价 格 
else 


Response.Write ("< script>alert(' 数 量 修改 失败 ,请 检查 !")< /script» "); 


当 发 现 购物 车 中 不 需要 某 一 商品 时 ,应 删除 这 件 商品 。 如 果 整 个 购物 车 中 的 商品 都 
不 需要 ,这 就 需要 购物 车 具有 全 部 清空 功能 , 接 下 来 介绍 购物 车 删除 数据 的 功能 。 
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从 前 面 的 介绍 中 可 以 看 到 ,购物 车 中 有 一 列 * 删 除 ” 按 钮 ,要 实现 “删除 ”按钮 功能 就 
要 编写 DataList 控件 的 DeleteCommand( 删 除 命令 ) 事 件 , 此 事件 用 来 删除 购物 车 中 的 一 
条 信息 ,DeleteCommand 事件 过 程 的 代码 如 下 : 


protected void DataListl DeleteCommand (object source, DataListCommandEventArgs e) 
i 
String book id =this.DataList1.DataKeys [e.Item.ItemIndex].ToString(); 
SglStr = "delete from 购物 车 表 where 图 书 编号 ='" «book id «"'"; 
Boolean Del Result; 
Del Result -db.UpdateDataBySql (Sqlstr); 
if (Del Result —true) 
t 
Response.Write ("< script»alert (' 记 录 删 除 成 功 !')< /script>"); 
DataListBind();// 绑 定数 据 
total money();// 计 算 价格 
i 
else 
Response.Write ("< script>alert (' 记 录 删 除 失败 ,请 检查 !')< /script>"); 
} 


前 面 介绍 的 删除 购物 车 数据 为 一 次 只 删除 一 条 数据 ,有 时 想 一 次 性 删除 购物 车 中 的 
所 有 数据 , 即 清空 购物 车 。 接 下 来 介绍 购物 车 页 面 上 的 “继续 购物 ”按钮 “清空 购物 车 ” 
按钮 和 “结算 中 心 ” 按 钮 的 功能 。 

“清空 购物 车 ”按钮 的 功能 即 为 删除 购物 车 中 所 有 记录 ,其 Click 事件 过 程 的 代码 
A: 


protected void delallbtn Click (object sender, EventArgs e) 
{ 
SqlStr -"delete from 购物 车 表 "; 
Boolean Del Result; 
Del Result -db.UpdateDataBySql (SqlStr); 
if (Del Result —true) 
t 
Response.Write ("< script» alert ("记录 删除 成 功 !')< /script» "); 
DataListBind ();// 绑 定数 据 
total money();// 计 算 价格 
} 
else 
Response.Write ("< script>alert ("记录 删除 失败 ,请 检查 !')< /script>"); 
} 


“继续 购物 ”按钮 和 “结算 中 心 " 按 钮 相当 于 一 个 超 链接 的 作用 ,“ 继 续 购 物 ” 按 钮 用 来 
返回 图 书信 息 展示 页 面 ,“ 结 算 中 心 ”按钮 用 来 进入 生成 订单 页 面 。 
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4.9 购物 结算 与 订单 查 殊 模 块 


购物 结算 中 心 用 于 将 购物 车 中 的 商品 进行 结算 ,生成 订单 并 提交 。 生 成 订单 后 , 系 
统 才 会 处 理发 货 , 也 就 是 说 系统 在 确认 订单 付款 之 后 就 会 进行 发 货 。 对 于 购物 车 中 的 商 
品 车 不 生成 订单 ,系统 是 不 会 处 理 的 。 生 成 订单 之 后 。 系 统 会 自动 删除 客户 购物 车 中 的 
商品 信息 。 

购物 结算 页 面 设计 步骤 如 下 : 在 项 目 中 添加 一 个 新 的 Web 窗 体 ,命名 为 order 
. aspx, 设 计 购 物 结算 页 面 ,在 order. aspx 页 面 上 添加 1 个 11 fF 1 列 的 表格 ,然后 在 表格 
中 添加 7 个 Label 控件 .1 个 GridView 控件 .2 个 TextBox 控件 .2 个 DropDownList 控 
件 和 3 个 Button 控件 ,最 终 设计 效果 如 图 4. 36 所 示 。 


价格 Bu 
数据 绑 定 数据 绑 定 数据 绑 定 数据 绑 定 
数据 绑 定 数据 绑 定 数据 绑 定 数据 绑 定 
数据 绑 定 数据 绑 定 数据 绑 定 数据 绑 定 
BIRRE 数据 绑 定 数据 绑 定 数据 绑 定 
SERRE 数据 绑 定 数据 绑 定 数据 绑 定 


Emu [元 
青 选择 发 贷方 式 : FE 可 
Bikes. FOR SI 

区 他 要 求 ， 


图 4.36 结算 中 心 页 面 设计 


GridView 控件 绑 定 4 个 字段 (图 书 编号 .图 书 名 称 、 价 格 和 数量 ) 的 内 容 。 发 货 方式 
与 付款 方式 的 选项 采用 静态 绑 定 ,发 货 方式 有 三 种 : 平邮 ,快递 和 送 货 上 门 ,付款 方式 有 
三 种 : 汇款 .转账 和 现金 “其 他 要 求 " 对 应 的 TextBox 控件 的 TextMode 属性 设置 为 
MultiLine。 

实现 购物 结算 功能 就 是 能 生成 订单 ,将 购物 车 表 中 的 数据 转移 动 详细 订单 表 , 下 面 
介绍 其 具体 实现 。 


1. 编写 计算 总 金额 方法 的 代码 


计算 总 金额 方法 是 用 来 计算 当前 客户 所 买 的 商品 的 总 金额 为 多 少 ,该 方法 的 名 称 为 
total_money, 其 代码 如 下 所 示 : 
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// 计 算 总 金额 


public void total money() 


i 


SqlStr ="select * from 购物 车 视图 where 会 员 名 = '" +Session["Username"] +"'"; 
Ds =db.GetDataTableBySql (SqlStr); 
try 
t 
if (Ds.Tables[0].Rows.Count ! =0) 
t 
Double price, sum —0; 
int count; 
for (int i -0; i «Ds.Tables [0].Rows.Count; i++)// 通 过 循环 得 到 总 金额 
price =Double.Parse (Ds.Tables [0] .Rows [i] [" 价 格 "] .TbString 0); 
count - int.Parse (Ds.Tables[0].Rows [i] [" 数 量 "] .Tostring()); 
sum -price * count; 
) 
this.total money txt.Text -sum.ToString(); 


) 
catch (Exception) 
t 
Response.Write ("< script>alert (' 没 有 得 到 数据 ,请 重 试 !')< /script»"); 


2. 编写 数据 绑 定 方法 的 代码 


数据 绑 定 的 代码 在 前 面 已 经 用 过 ,为 了 避免 重复 写 代 码 , 因 此 把 它 定 义 为 一 个 方法 ， 
其 名 称 为 DataGridViewBind, 其 代码 如 下 ; 


// 绑 定数 据 方法 
public void DataGridViewBind () 


{ 


SqlStr ="select * from 购物 车 视图 where 会 员 名 ='" +Session["Username"] «"'"; 
Ds -db.GetDataTableBySql (SqlStr); 
try 
t 
this.GridViewl.DataSource - Ds.Tables[0].DefaultView; 
this.GridViewl.DataBind(); 
} 
catch (Exception) 
t 
Response.Write ("< script>alert(" 没 有 得 到 数据 ,请 重 试 !")</script> "); 
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3. 编写 购物 结算 页 面 的 Page_Load 事件 过 程 带 程序 代码 


购物 结算 中 心 的 Page_Load 事件 过 程 要 完成 将 当前 客户 购物 车 的 信息 显示 在 本 页 
面 中 的 GridView 控件 中 ,并 计算 总 金额 ,其 代码 如 下 : 


protected void Page Load (object sender, EventArgs e) 
t 
if (Page.IsPostBack —- false) 
t 


if (Session["Username"] ! -null) 
t 

DataGridViewBind(); 

total money(); 


) 


else 


t 
Response .Redirect ("Error.aspx"); 


) 


“生成 订单 ”按钮 的 Click 事件 过 程 ,首先 要 生成 一 个 订单 号 ,然后 生成 订单 与 详细 订 
单 ,最 后 显示 当前 客户 购物 车 中 的 商品 信息 。 其 代码 如 下 ; 


protected void orderbtn Click(object sender, EventArgs e) 
£ 
int max order; 
SqlStr -"select max( 订 单 编号 ) from 订单 表 "; 
Ds -db.GetDataTableBySql (SqlStr) ; 
// 判 断 订 单 表 中 是 否 已 有 记录 ,如 果 有 , 则 直接 获取 订单 编号 ;否则 ,将 最 大 订单 编号 设 
为 1 
if (Ds.Tables[0].Rows[0] [0] .ToString() ! ="") 
t 
max order —int.Parse (Ds.Tables[0].Rows [0] [0] . ToString()) +1; 


// 生 成 订单 
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SglStr ="insert into 订单 表 (订单 编号 ,会 员 名 ,发 货 方式 ,付款 方式 ,总 金额 ,是 否 发 
货 ,备注 )" 
+ "values ('" +max order.ToString() +"","'"+Session["Username"] -"','" +this. 
ddlconsignment.SelectedItem.Text +"'," 
*-"'"-this.ddlpayment.SelectedItem.Text +"','" +this.total money txt.Text. 
ToString ().Trim () *"',0,'" *this.remarktxtbox.Text -"')"; 
if (db.UpdateDataBySql (SqlStr) ) 
t 
Boolean UpdateResult; 
// 生 成 详细 订单 
Sqlstr = "insert into 详细 订单 表 (会 员 名 ,图 书 编号 ,数量 ) select 会 员 名 ,图书 编 
号 ,数量 from 购物 车 表 where " 
+ "会 员 名 = '" +Session["Username"] +"'"; 
UpdateResult- db.UpdateDataBySql (SqlStr); 
Sqlstr = "update 详细 订单 表 set 订单 编号 = '" «max order.ToString() *"' where 
订单 编号 is null"; 
UpdateResult- db.UpdateDataBySql (SqlStr)7 


// 删 除 购物 车 中 的 数据 
SqlStr = "delete from 购物 车 表 where 会 员 名 = '" +Session["Username"] +"'"; 
UpdateResult- db.UpdateDataBySql (SqlStr); 
this.ordernolab.Visible -true; 
this.ordernolab.Text +=max order.ToString(); 


) 


订单 查询 就 是 让 用 户 查 询 其 订单 的 详细 信息 以 及 订单 的 处 理 情况 。 在 完整 系统 的 
主页 上 增加 一 个 订单 查询 的 链接 即 可 ,这 里 只 介绍 其 功能 的 实现 。 

用 户 想 知道 自己 的 订单 是 否 已 经 被 处 理 , 可 以 通过 订单 查询 功能 来 获得 订单 的 处 理 
结果 ,在 系统 中 新 增加 一 个 订单 查询 页 面 order_ search. aspx, 添 加 2 个 Label、1 个 
TextBox 控件 、1 个 Button 控件 ,1 个 Panel 控件 和 1 个 GridView 控件 。 该 Web 页 面 应 
用 了 Panel 控件 ,Panel 控件 是 一 个 容器 控件 ,可 以 将 各 种 Web 控件 拖 入 其 中 。 它 最 大 的 
优点 是 可 以 实现 多 个 控件 的 同时 显示 与 隐藏 ,因此 其 在 网 页 中 的 应 用 非常 广 。 在 Panel 
控件 中 添加 2 个 Label 控件 和 1 个 TextBox 控件 ,2 个 Label 控件 的 属性 分 别 为 “总 金 
额 *“ 元 ”, 如 果 要 让 其 在 浏览 页 面 时 不 显示 ,必须 通过 某 一 事件 修改 其 Visible 属性 为 
True 才 会 显示 。 订 单 查询 页 面 设 计 如 图 4. 37 所 示 。 

当 用 户 输入 要 查询 的 订单 号 , 单 击 “ 查 询 ” 按 钮 ,页 面 则 显示 此 订单 的 详细 信息 及 订 
单 总 金额 。 接 下 来 介绍 订单 查询 功能 的 实现 。 

根据 用 户 输入 的 订单 编号 ,显示 订单 详细 信息 ,包括 订单 的 基本 信息 和 订单 的 处 理 
情况 。 

1) 订单 查询 页 的 初始 化 事件 


TEE 


数据 绑 定 ”数据 绑 定 数据 绑 定 数据 绑 定 数据 绑 定 数据 绑 定 br 数据 绑 定 BERE SMERE 


数据 绑 定 ”数据 绑 定 数据 绑 定 HERE 数据 绑 定 SMERE HERE MERE 数据 绑 定 数据 绑 定 
数据 绑 定 数据 绑 定 数据 绑 定 MERE SERE MERE 数据 绑 定 

数据 绑 定 数据 绑 定 数据 绑 定 数据 绑 定 数据 绑 定 MERE 数据 绑 定 
数据 绑 定 _ 数 据 绑 定 数据 绑 定 _ 数 据 绑 定 数据 绑 定 数据 绑 定 数据 绑 定 MERE HERE SMERE 


图 4.37 订单 查询 页 面 设计 


订单 查询 页 面 的 Page Load 事件 过 程 的 功能 就 是 判断 用 户 是 否 登 录 , 其 代码 如 下 
所 示 : 


Protected void Page Load (object sender, EventArgs e) 
t 
if (!IsPostBack) 
t 
//Session["Username"] - "ning"; 
if (Session["Username"] — null) 
t 
Response.Redirect ("Error.aspx"); 
) 
this.order no txtbox.Focus(); 


i 


2) 订单 查询 事件 
“查询 ”按钮 的 Click 事件 过 程 的 功能 就 是 根据 输入 的 订单 号 显示 其 订单 的 详细 信息 
以 及 处 理 情况 并 计算 出 总 金额 ,其 代码 如 下 : 


protected void Buttonl Click (object sender, EventArgs e) 
1 
if (this.order no txtbox.Text ! ="") 
t 
SqlStr -"select * from 详细 订单 视图 where 会 员 名 ='" Session ["Username"] 
*"' and 订单 编号 ='" +this.order no txtbox.Text +"'"; 
Ds =db.GetDataTableBySql (SqlStr); 
if (Ds.Tables[0].Rows.Count ! =0) 
{ 
this.GridViewl.DataSource =Ds.Tables [0] .DefaultView; 
this.GridViewl.DataBind(); 
this.Panell.Visible -true; 
this.GridViewl.Visible —true; 
int i, count; 


Double price, sum —0; 


网 上 书店 后 台 管 理 是 一 个 只 对 管理 员 开 放 而 不 对 普通 用 户 开 放 的 模块 ,是 管理 员 用 
来 维护 系统 数据 的 子 系统 。 网 上 书店 的 后 台 管 理 主要 有 图 书 管理 .订单 管理 、 会 员 管理 。 
为 了 保证 数据 安全 性 ,进入 后 台 必 须 通 过 身份 验证 之 后 才能 做 相应 的 操作 。 后 台 
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for (i =0; i «Ds.Tables[0].Rows.Count; i++) 

1 
price -Double.Parse (Ds.Tables [0] .Rows [i] [" 价 格 "] -ToString ()); 
count —int.Parse (Ds.Tables[0].Rows [i] [" 数 量 "] .ToString 0); 
sum --price * count; 

} 

this.totaltxtbox.Text —sum.ToString(); 


this.GridViewl.Visible - false; 

this.Panell.Visible - false; 

Response Write ("< script»alert (' 此 订单 编号 不 存在 !')< /script» "); 
this.order no txtbox.Focus(); 


this.GridViewl.Visible =false; 

this.Panell.Visible =false; 

Response.Write ("< script» alert ("请 输入 要 查询 的 订单 编号 !')< /script? "); 
this.order no txtbox.Focus(); 


4.10 后 合 管 理 和 模块 


录 页 面 设计 步骤 如 下 。 


在 系统 中 新 建 一 个 Web 窗 体 命 名 为 admin login. aspx, 设 计 后 台 登 


login. aspx 页 面 的 最 终 设计 效果 如 图 4. 38 所 示 。 
“登录 ”按钮 代码 如 下 : 


protected void btnLogin Click(object sender, EventArgs e) 


1 


String Md5 User Pwd = FormsAuthentication.HashPasswordForStoringInConfigFile (this.txt 


.User Pwd.Text.ToString() ，"MD5") ;// 作 为 密码 方式 加 密 


SglStr = "select * from 管理 员 表 where 用 户 名 = '" +this.txt User Name.Text *"' and 
密码 ='" +Md5 User Pwd *"'"; 
Ds =db.GetDataTableBySql (SqlStr) 7 


录 页 面 ,admin_ 
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图 4.38 订单 查询 页 面 设 计 


if (Ds.Tables[0].Rows.Count — 0) 

{ 
Response.Write ("< script»alert( ' 用 户 名 或 密码 错误 ,请 重 试 !') 
</script>"); 


this.txt User Name.Focus(); 


Session["Admin UserName"] -this.txt User Name.Text; 
Response. Write ("< SCRIPT» window. location. href = 'admin index. aspx '; 
< /SCRIPT» "); 
) 
) 
catch (Exception) 
{ 
Response.Write ("< script» alert ( ' 没 有 得 到 任何 数据 ,请 重 试 !1')< /script>"); 
} 
} 


后 台 管理 主页 面 是 进行 后 台 管 理 的 入 口 ,其 设计 效果 如 图 4. 39 所 示 。 

后 台 管 理 页 面 的 左边 为 导航 区 ,右边 为 浮动 框架 ,用 来 显示 各 个 后 台 管 理 页 面 的 
内 容 。 
图 书信 息 管 理 模块 是 网 上 书店 后 台 管 理 中 的 一 个 主要 功能 模块 ,其 主要 包括 图 书信 
息 的 新 增删 除 .修改 和 查询 。 

当 有 新 的 图 书 出 版 时 ,就 要 在 网 上 书店 进行 显示 ,这 就 需要 一 个 图 书信 息 新 增 功能 ， 
图 书信 息 新 增 页 面 设计 过 程 如 下 : 在 项 目 中 添加 一 个 新 的 Web 窗 体 ,命名 为 admin_ 
book add. aspx, 设 计 图 书信 息 新 增 页 面 ,其 最 终 设计 效果 如 图 4. 40 所 示 。 


1. 图 书信 息 新 增 页 面 初始 化 事件 
图 书信 息 新 增 页 面 初始 化 事件 代码 如 下 : 
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网 上 书店 。 网 上 书店 为 您 


提供 各 类 图 书 网 上 服务 


订单 处 理 


请 输入 要 查询 8 订单 编号 : 


CE) 


| 订单 编号 订单 日 期 购物 会 员 发 贷方 式 付款 方式 总 金额 是否 发 货 备注 发 货 处 理 ] 


20070808 ning 
20070808 ning 
20070808 ning 
20070809 ning 
20070809 ning 
20070809 ning 
20090620 ning 
20090620 ning 
20090620 ning 
20090620 ning 
20090620 ning 
20090620 ning 
20090623 nyz 


False 
False 
False 
False 
False 
False 
False 
False 
False 
False 
False 
False 
False 


Dig 
Da 
Da 
回 发 货 
Dis 
Dis 
Dig 
回 发 货 
Dis 
回 发 货 
Dis 
回 发 货 
回 发 货 


4.40 新 增 图 书页 面 


// 绑 定 图 书 类 型 
void BookType DataBind() 
{ 
SglStr ="select * from 图 书 类 型 表 "; 
Ds =db.GetDataTableBySql (SqlStr) ; 
try 
{ 
string booktype name; 


for (inti =0; i «Ds.Tables[0].Rows.Count; i++) 


t 
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booktype name =Ds.Tables[0] .Rows [i] [1] .ToString()7 
DropDownList BookType.Items.Add(booktype name); 


) 
catch (Exception) 
t 
Response.Write ("< script» alert (' 没 有 获得 数据 !')< /script» "); 


) 


2. 文件 上 传 


文件 上 传 是 后 台 管理 的 一 个 重要 模块 ,很 多 系统 的 后 台 管 理 都 要 用 到 文件 上 传 功 
能 。 网 上 书店 中 的 每 一 本 图 书 都 有 一 个 图 片 .这 个 图 片 如 何 上 传 呢 ? 从 前 面 的 数据 库 介 
绍 可 以 知道 ,在 图 书 表 中 ,图 片 字 段 是 存放 一 个 路 径 , 而 不 是 图 片 的 内 容 , 那 么 在 新 增 图 
书记 录 时 图 片 字段 也 只 能 是 一 个 路 径 , 那 图 片 怎么 办 ? 可 利用 文件 上 传 功 能 将 其 上 传 到 
指定 的 位 置 。 文 件 上 传 的 关键 是 要 得 到 文件 上 传 的 位 置 与 文件 类 型 即 扩展 名 。 在 “新 增 
图 书 ” 按 钮 的 Click 事件 过 程 中 添加 以 下 代码 ,实现 文件 上 传 功 能 。 
string path file =FileUpload Image.PostedFile.FileName.ToString(); 
// 获 取 要 上 传 文件 的 路 径 
string file type -path file.Substring(path file.LastIndexOf("."))7 
// 获 取 要 上 传 文件 的 类 型 
string file name = DateTime. Now. Year. ToString () + DateTime. Now.Month. ToString () + 
DateTime.Now.Day.ToString() * DateTime.Now.Hour.ToString() * DateTime.Now.Minute.ToString 


() * DateTime.Now.Second.ToString(); 
// 根 据 系 统 的 时 间 生 成 上 传 文件 的 名 称 


full name -file name «file type; // 生 成 上 传 文件 的 全 名 称 
string path = Server.MapPath ("image\\") +full name; // 获 取 文 件 要 上 传 到 的 位 置 
FileUpload Image.SaveAs (path); // 文 件 上 传 


3. 图 书 新 增 功能 的 实现 
图 书 新 增 功能 就 是 将 图 书信 息 插 入 到 图 书 表 ,实现 图 书 新 增 功能 的 代码 如 下 : 


protected void btn Ok Click(object sender, EventArgs e) 
i 
if (Session["Admin UserName"] ! =null) 
t 
try 
t 
string path file —FileUpload Image.PostedFile.FileName.ToString(); 
string file type -path file.Substring(path file.LastIndexof (".")); 
string file name = DateTime.Now.Year.ToString() + DateTime.Now.Month. 
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ToString() +DateTime.Now.Day.ToString () +DateTime .Now.Hour.ToString () 
+ DateTime.Now.Minute.ToString() +DateTime.Now.Second.ToString (); 
full name =file name +file type; 
string path = Server.MapPath ("image\\") +full name; 
FileUpload Image.SaveAs (path); 
) 
catch (Exception) 
t 
Response.Write ("< script»alert(' l f£ 3C fF Wr 1')« /script»"); 
) 
SqlStr -"select * from 图 书 类 型 表 where 类 型 名 = '" + DropDownList BookType. 
Text.Trim() *"'"; 
Ds = db.GetDataTableBySql (SqlStr); 
string type id =Ds.Tables [0] .Rows [0] [0] .ToString(); 
string image path ="image\\" + full name; 
SqlStr -"insert into 图 书 表 (类 型 编号 ,图 书 名 ,价格 ,作者 ,开本 ,印张 ,字数 ,版 
次 ,书号 , 印 数 ,图 片 )" 
+ "values ('" +type_id +"','" +TextBox_BookName.Text +"','" +TextBox_ 
BookPrice.Text +"'," 
+"'" +TextBox_BookAuthor.Text +"','" + TextBox Book kaibeng.Text +"'," 
+"'" + TextBox Book Printer.Text +"','" + TextBox BookCount.Text +"'," 
+"'" + TextBox Book banci.Text +"','" + TextBox Book ISBN.Text + "'," 


+"'" +TextBox Book yinshu.Text +"','" «image path +" 
try 


if (db.UpdateDataBySql (Sqlstr)) 
t 

Response Write ("< SCRIPT» alert ("图书 新 增 成 功 !')< /SCRIPT» "); 
} 
else 


{ 
Response.Write ("< SCRIPT» alert (' 图 书 新 增 失败 !1')< /SCRIPT» "); 


} 
catch (Exception) 
{ 


Response.Write ("< SCRIPT» alert ("图书 新 增 失败 ')< /SCRIPT> 


Response.Redirect ("Error.aspx"); 
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在 上 传 图 书 时 不 小 心 把 数据 填写 错误 ,怎么 办 ? 需要 修改 ,因此 图 书信 息 修改 在 网 
上 书店 的 后 台 管理 中 也 是 一 个 非常 重要 的 功能 。 图 书信 息 修改 页 面 设计 如 图 4. 41 
所 示 。 


图 4.41 新 增 图 书页 面 


在 图 书信 息 修改 页 面 上 图 书 修改 部 分 内 容 放 在 一 个 Panel 控件 中 ,只 有 当 要 单 击 “ 修 
改 " 按 钮 时 才 显 示 图 书 修改 部 分 的 内 容 , 具 体 设计 请 读者 查阅 ebook 项 目的 相应 代码 。 
接 下 来 介绍 其 功能 的 具体 实现 。 

1) 公共 方法 

为 了 减少 代码 编辑 量 ,定义 以 下 几 个 公共 方法 ,具体 代码 如 下 : 


String SglStr; 

DB db =new DB() ; 

DataSet Ds =new DataSet () 7 
String full name; 

int PageSize; // 每 页 条 数 
int RecordCount; // 总 条 数 
int PageCount; 。// 总 页 数 
int CurrentPage; // 当 前 页 数 


public void BookType DataBind() 
{ 
SqlStr = "select 类 型 名 from 图 书 类 型 表 "; 
Ds =db.GetDataTableBySql (Sqlstr); 
try 
t 
for (inti =0; i «Ds.Tables[0].Rows.Count; i++) 
t 
DropDownList BookType .Items.Add (Ds . Tables [0].Rows[i][1].ToString ()); 
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) 
} 
catch (Exception) 
Response.Write ("< SCRIPT» alert (' 没 有 获得 任何 数据 !')< /SCRIPT> "); 
¥ 
} 
public void DataListBind() 
t 
try 
t 
int StartIndex -CurrentPage * PageSize;// 设 定 导 入 的 起 终 地 址 
String SqlStr ="select * from 图 书信 息 视图 "; 
DataSet Ds =new DataSet () ; 
SqlConnection con - new SqlConnection(); 
con.ConnectionString —-db.GetConnectionString(); 
con.Open () 7 
SglDataAdapter Da =new SqlDataAdapter (SqlStr, con); 
// 这 是 sda.Fill 方 法 的 第 一 次 重 载 ,里 面 的 变量 分 别 是 数据 集 Dataset , 
// 开 始 记录 数 startRecord, 最 大 的 记录 数 MaxFRecord, 数 据 表 名 TableName 
Da.Fill (Ds, StartIndex, PageSize, "图 书信 息 视图 "); 
this.DataListl.DataSource =Ds.Tables[" 图 书信 息 视 图 "] .DefaultView; 
this.DataListl.DataBind(); 
this.PreviouslLB.Enabled -true; 
this.NextLB.Enabled -true; 
if (CurrentPage == (PageCount - 1)) 
this.NextLB.Enabled = false; // 当 为 最 后 一 页 时 ,下 一 页 链接 按钮 不 可 用 


} 


) 


if (CurrentPage —— 0) 
this.PreviouslB.Enabled = false; // 当 为 第 一 页 时 ,上 一 页 按钮 不 可 用 
this.Lab Current.Text = (CurrentPage +1) .ToString ();// 当 前 页 数 


catch (Exception ex) 


t 


throw new Exception (ex.Message) ; 


// 定 义 分 页 事件 
public void LinkButton Click (Object sender, CommandEventArgs e) 


1 


CurrentPage = (int)Viewstate["PageIndex"];// 获 得 当前 页 索引 
PageCount = (int)ViewState["PageCount"]; // 获 得 总 页 数 
string cmd —e.CommandName; 
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// 判 断 cmd, 以 判定 翻 页 方向 
Switch (cmd) 
{ 
case "prev": 大业 一 页 
if (CurrentPage >0) 
CurrentPage- - ; 


break; 


case "next": 
if (CurrentPage < (PageCount -1)) 
CurrentPage+ + ; XIA 下 一 页 


break; 


case "first": // 第 一 页 
CurrentPage =07 


break; 


case "end": // 最 后 一 页 
CurrentPage - PageCount - 1; 


break; 


case "jump": // 跳 转 到 第 几 页 
// 如 果 输 入 数字 为 空 或 超出 范围 则 返回 
if (this.TextBoxl.Text.Trim() =="" || 
Int32.Parse (this.TextBoxl.Text.Trim()) > PageCount) 
t 


return; 

) 

else 

t 
CurrentPage - Int32.Parse(this.TextBoxl.Text.ToString()) -1; 
break; 

) 


b 

ViewState["PageIndex"] =CurrentPage;// 获 得 当前 页 

this.DataListBind(); // 重 新 绑 定 DataList 
} 


2) 页 面 初始 化 事件 
图 书信 息 修改 页 面 的 初始 化 事件 代码 如 下 : 


protected void Page Load (object sender, EventArgs e) 


t 
if (Page.IsPostBack — false) 
t 
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if (Session["Admin UserName"] ! —-null) 
t 
PageSize =10;// 每 页 为 10 条 记录 
if (! Page.IsPostBack) 
t 
CurrentPage =0;// 当 前 页 设 为 0 
ViewState["PageIndex"] =0;// 页 索引 设 为 0 
// 获 取 总 共有 多 少 条 记录 
SqlStr ="select count(* ) as count from 图 书 表 "; 
Ds =db.GetDataTableBySql (SqlStr); 
if (Ds.Tables[0].Rows.Count ! =0) 
{ 
RecordCount = int.Parse (Ds.Tables [0] .Rows [0] ["count"].ToString 
0); 


else 


RecordCount =0; 
) 
// 计 算 总 共有 多 少 页 
if (RecordCount $ PageSize — 0) 
t 
PageCount - RecordCount / PageSize; 
) 
else 
t 
PageCount -RecordCount / PageSize +1; 
) 
this.Lab total.Text =PageCount.ToString();// 显 示 总 页 数 
// 会 话 Session 对 整个 Application 有 效 , 而 视图 状态 ViewState 相当 于 
某 个 页 面 的 session 
ViewState ["PageCount"] =PageCount; 
this.Lab info.Visible - false; // 暂 不 显示 提示 信息 
BookType_DataBind();// 对 图 书 类 型 进行 动态 绑 定 
DataListBind(); // 对 DataList 控件 进行 绑 定 


} 


3) DataList 控件 中 “修改 ”按钮 事件 
DataList 控件 中 “修改 ”按钮 事件 就 是 触发 DataList 控件 中 的 UpdateCommand 事 
件 ,其 主要 功能 是 修改 相应 的 图 书信 息 , 并 设置 Panel 控件 为 可 见 , 其 具体 代码 如 下 : 
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protected void DataListl UpdateCommand (object source, DataListCommandEventArgs e) 
{ 

LinkButton btn = (LinkButton) DataListl. Items [e. Item. ItemIndex ] .FindControl (" 

update book"); 

Session["book id"] -btn.ToolTip; 

SqlStr -"select * from 图 书 表 where 图 书 编号 = '" + Session["book id"] +"'"; 

Ds -db.GetDataTableBySql (SqlStr); 

if (Ds.Tables[0].Rows.Count ! =0) 

t 
this.txb BookName.Text —Ds.Tables[0].Rows[0] [2] .ToString(); 
this.txb BookPrice.Text =Ds.Tables [0] .Rows [0] [3] . ToString(); 
this.txb BookAuthor.Text =Ds.Tables [0] .Rows [0] [4] .ToString(); 
this.txb Book kaibeng.Text =Ds.Tables [0] .Rows [0] [5] .ToString(); 
this.txb Book Printer.Text =Ds.Tables[0] .Rows [0] [6] .ToString(); 
this.txb BookCount.Text =Ds.Tables [0] .Rows [0] [7] .ToString(); 
this.txb Book banci.Text =Ds.Tables [0] .Rows [0] [8] . ToString(); 
this.txb Book ISBN.Text -Ds.Tables[0].Rows[0] [9] . ToString (); 
this.txb Book yinshu.Text - Ds.Tables[0].Rows[0] [10] . ToString(); 
this.txb image.Text =Ds.Tables [0] .Rows [0] [11] .ToString(); 
Session["booktype id"] -Ds.Tables[0].Rows[0] [1] . ToString (); 
Panell.Visible -true; 


) 
// 获 取 类 型 编号 相应 的 类 型 名 
SqlStr = "select 类 型 名 from 图 书 类 型 表 where 类 型 编号 = '" + Session 
["booktype id"] *"'"; 
Ds -db.GetDataTableBySql (SqlStr); 
if (Ds.Tables[0].Rows.Count ! =0) 
t 
// 作 为 第 一 项 添加 到 DropdownList 中 去 
DropDownList BookType.Items.Insert (0, Ds.Tables [0] .Rows [0] [" 类 型 名 "]. 
ToString().Trim()); 
) 
else 
t 
this.Lab info.Text =" 没 有 这 种 图 书 类 型 ,请 重新 输入 !"; 


return; 


} 


4) 实现 修改 图 书信 息 事 件 
实现 修改 图 书信 息 事 件 就 是 将 图 书 修改 之 后 的 信息 保存 到 图 书 表 ,其 具体 代码 
Wr. 


protected void btn Ok Click(object sender, EventArgs e) 
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String image path; 
// 判 断 上 传 的 文件 是 否 为 空 
if (FileUpload Image.PostedFile.ContentLength ! =0) 
t 
try 
t 
// 获 取 文 件 的 路 径 
String path file =FileUpload Image.PostedFile.FileName.ToString (); 
/ [path file.LastIndexof(".") 表 示 取 得 文件 路 径 中 最 后 一 个 “ .的 索引 
String file type -path file.Substring (path file.LastIndexOf(".")); 
// 根 据 日 期 与 时 间 为 文件 命名 ,确保 文件 不 重 名 
String file name = DateTime.Now.Year.ToString() + DateTime.Now.Month. 
ToString() *DateTime.Now.Day.ToString() * DateTime.Now.Hour.ToString() 
* DateTime.Now.Minute.ToString() * DateTime.Now.Second.ToString(); 
full name -file name «file type; 
String path -Server.MapPath("imageW") «full name; 
FileUpload Image.SaveAs (path); 
) 
catch (Exception) 
t 
Response.Write ("< SCRIPT» alert (' 上 传 文件 失败 !')< /SCRIPT» "); 
} 
image path ="image\\" +full name; 
) 
else 
image path -txb image.Text.Trim(); 
// 根 据 选择 的 图 书 类 型 名 来 查询 相应 的 类 型 编号 
SqlStr = "select 类 型 编号 from 图 书 类 型 表 where 类 型 名 = '" + DropDownList_ 
BookType.Text &"'"; 
Ds -db.GetDataTableBySql (SqlStr); 
if (Ds.Tables[0].Rows.Count ! =0) 
t 
Session["booktype id"] =Ds.Tables [0] -Rows [0] [" 类 型 编号 "] .Tbstring 0; 


else 


this.Lab info.Text =" 出 错 "; 
return; 


} 


/闪闪 关 关 关 关 关 关 关 关 尖 关 关 关 关 尖 尖 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 
SqlStr= "update 图 书 表 set 类 型 编号 ='" + Session["booktype id"] +"', 图 书 名 ='"+ 
txb BookName.Text.Trim() +"'" 
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+", 价 格 ='" - txb BookPrice.Text.Trim() +"', 作 者 ='" +txb BookAuthor.Text. 
Trim() +"', 开 本 ='" +txb Book kaibeng.Text.Trim() +"'" 

+", 印 张 ='" +txb_Book Printer.Text.Trim() +"', 版 次 ='" +txb Book banci. 
Text.Trim() +""" 

+", 书 号 ='" +txb Book ISBN.Text.Trim() +"', 印 数 ='" +txb Book yinshu.Text. 
Trim() *"'" 

+", 图 片 ='" +image path.Trim() *"' where 图 书 编号 ='" + Session["book id"] + 


if (db.UpdateDataBySql (Sqlstr)) 

t 
this.Lab info.Visible -true; 
this.Lab info.Text =" 修 改 数据 成 功 !"; 

} 

else 

{ 
this.Lab info.Visible =true; 
this.Lab info.Text =" 修 改 数据 失败 !1"; 
return; 

} 

DataListBind(); 

} 


后 台 管 理 员 根 据 客户 的 支付 情况 对 订单 进行 处 理 ,将 订单 是 否 发 货 的 状态 改 为 发 货 
状态 。 在 订单 处 理 页 面 中 管理 员 可 以 对 某 一 个 订单 进行 处 理 , 也 可 对 批量 的 订单 进行 处 
理 ,将 要 处 理 订单 后 面 的 复 选 框 进行 选中 ,再 单 击 “ 发 货 处 理 ” 按 钮 对 订单 进行 发 货 处 理 。 
订单 处 理 页 面 的 设计 效果 如 图 4. 42 所 示 。 


订单 处 理 
请 输入 要 查询 的 订单 编号 : Lares | 
订单 编号 订单 日 期 购物 会 员 RADR 付 教 方式 总 全 额 ”是 否 发 货 备注 RANE 
HIRUNE 数据 六 定 SuRUEE 数据 必定 数据 泊 定 HRUE 数据 必定 HEURE [URS 
PARURE Shugüpe SrBUpE 数据 履 定 数据 纤 定 S18UpE 数据 乡 定 数据 线 定 [URS 
数据 绑 定 Suspe SugUpE SHRINE 数据 堵 定 HüBULE SIRUPE HRE MRA 
数据 绑 定 SHOE 数据 暑 定 SRUEE 数据 终 定 数据 乡 定 数据 绑 定 Susie M RA 
数据 绑 定 数据 线 定 SugUpE 数据 铸 定 SIRUPE 数据 乡 定 数据 乡 定 Supe [RAE 


发 货 处 理 f 
图 4.42 订单 处 理 页 面 


CD 数据 绑 定 公共 方法 。 为 了 减少 代码 的 编辑 工作 量 , 特 定义 将 数据 绑 定 到 
DataList 控件 的 方法 ,其 代码 如 下 : 
public void DatalistBind() 


{ 
Sqlstr - "select 订单 编号 ,会 员 名 ,convert (varchar, 订 单 日 期 ,112) as 订单 日 期 ,发 货 方 
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式 , 付 款 方式 ,总 金额 ,是 否 发 货 ,备注 from 订单 表 where 是 否 发 货 = 'false'"; 
Ds =db.GetDataTableBySql (SqlStr ); 
try 
{ 
if (Ds.Tables[0].Rows.Count ! =0) 
t 
DataListl.DataSource - Ds.Tables[0].DefaultView; 
DataListl.DataBind(); 
} 
else 
{ 
Response.Write ("没有 相关 数据 1") ; 


catch (Exception) 
{ 
Response.Write ("< SCRIPT» alert ("查询 出 现 异常 !')< /SCRIPT>"); 


} 


(2) 订单 处 理 页 面 初始 化 事件 。 订 单 处 理 页 面 主 要 通过 判断 用 户 是 否 登 录 , 若 登录 
则 将 数据 绑 定 到 DataList 控件 ,否则 显示 提示 用 户 登录 页 ,订单 处 理 页 面 的 初始 化 时 间 
代码 如 下 : 


protected void Page Load (object sender, EventArgs e) 
{ 
if (IsPostBack== false ) 
{ 
//Session["Username"] = "admin"; 
if (Session["Admin UserName"] ! -null) 
t 
DatalistBind(); 


Response.Redirect ("Error.aspx"); 


) 


(3) 修改 订单 状态 事件 。 修 改 订单 状态 就 是 将 原来 没 发 货 的 订单 根据 客户 支付 情况 
进行 发 货 处 理 , 功 能 实现 的 思路 是 管理 员 可 以 对 某 一 个 订单 进行 发 货 ,为 了 提高 管理 员 
的 工作 效率 ,也 可 以 允许 管理 员 进行 批量 处 理 订单 进行 发 货 ,“ 发 货 处 理 ” 按 钮 的 事件 代 
码 如 下 : 
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protected void btn OK Click(object sender, EventArgs e) 
{ 
for (int i =0; i «DataListl.Items.Count; i++) 
{ 
CheckBox checkbox = (CheckBox) DataListl.Items[i].FindControl ("deal order"); 
if (checkbox.Checked — true) 
t 
SglStr = "update 订单 表 set 是 否 发 货 ='true' where 订单 编号 = '" + 
checkbox.ToolTip *"'"; 
bool updateResult -db.UpdateDataBySq! (SqlStr)7 


) 
DatalistBind(); 
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利用 上 述 知识 完成 一 个 博客 系统 。 要 求 如 下 : 该 博客 能 够 完成 注册 、 登 录 ,管理 自己 
的 文章 ,同时 能 够 浏览 别人 的 文章 并 能 够 进行 文章 的 评论 。 界 面 如 图 4. 43 所 示 。 
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ER 
SEE 


TE emer [ul 


E^ LEERS 


用 户 列表 Usure Line 


sme 

me 一 [3] 
新 博客 开张 了 ， 欢 迎 大 家 光 栓 use [0] 
Sun, 14 Oct 2097 29:18:39 GMT sunshine — [0] 


GEDLIBSDTB, RAANOCRA TRE IBS, BUAERISUIIS. BCCEIRATORIERTET. 
WWIE E Friends inks 


EXROMRRIDET , BXGEEIUERURDGUTMR, RA BC — TERI AARR. d 


ZOMEAUMR , REAURU T XEIWSFIGDORI , RET tibREO NEN. koe duod 
seis 
dÍBBIS | TE EE iiU" 
> mezv RIPSHR Login 
; mna: 
Wè: gg 
EED 


EUERE. KENE 


Sun, 14 Oct 2007 09:14:35 GMT 


TEW-LERISS , THOR? 
i TT im ro 


TES chopter C —  — 
基于 Java 的 在 线 通讯 录 


由 于 纸 制 或 电子 形式 的 通讯 录 有 携带 不 方便 和 容易 忘记 等 缺点 ,本 章 要 开发 一 个 网 
络 通讯 录 , 为 用 户 提供 方便 。 网 络 通讯 录 需 要 实现 如 下 功能 。 

(1) 用 户 注册 登录 功能 。 

(2) 登录 后 ,显示 出 与 当前 用 户 相 关 的 联系 人 名 单 。 

(3) 用 户 添 加 联系 人 。 

(4) 用 户 删除 联系 人 。 

(5) 根据 用 户 类 型 查找 联系 人 。 

其 流程 如 图 5.1 所 示 。 


1 1 
(添加 联系 人 ] (查询 联系 人 ] (删除 联系 人 ] 
| 查找 所 有 联系 人 ) | 分 类 查找 联系 人 | 


图 5.1 在 线 通讯 录 流 程 


所 用 的 开发 工具 为 MyEclipse 十 Tomcat。 
5.1 系统 数据 库 


首先 创建 系统 数据 库 , 在 线 通讯 录 采 用 SQL Server 2008 数据 库 服务 器 ,数据 库 名 称 
为 addressBook。 然 后 在 数据 库 中 建立 一 个 用 户 表 (USERS) ,该 表 存 储 能 够 访问 本 系统 
的 用 户 , 表 结构 如 图 5. 2 Bras. 
再 创建 一 个 表 .命名 为 BOOK ,该 表 存 储 用 户 的 通讯 录 信 息 . 表 结构 如 图 5. 3 所 示 。 
在 MyEclipse 中 创建 一 个 Web 项 目 . 项 目 名 称 为 AddressBook. 如 图 5. 4 所 示 。 
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v 
v 
v 
v 
v 
v 
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Create a Web Project 
Create a web project in the workspace or an external location 


Web Project Details — 

Project Name: AddressBook 

Location: IV] Use default location 
Diretor:  [EuAvASpaceaddresstook |] 


Source folder: src 


Web root folder: WebRoot 

ceanaumcT 
J2EE Specification Level 
回 JavaEE50 OJEE14 ©JÆE13 
| Maven. 
E Add Maven support. 


图 5.4 创建 项 目 
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创建 好 项 目 后 ,在 左 侧 的 SRC 目录 下 创建 一 个 包 (package) ,命名 为 servlet, 如 
图 5.5 所 示 。 

然后 依次 创建 common 包 entity 包 operation 包 , 这 些 包 要 存放 不 同 功 能 的 Java 
类 ,创建 好 后 如 图 5. 6 所 示 。 这 些 包 都 将 在 这 个 项 目 中 使 用 ,后 面 会 有 详细 论述 。 


Java Package 
Create a new Java package. 


Creates folders corresponding to packages. 
Source folder: | AddressBook/src 
Name: servle 


b mÀ Java EE 5 Libraries. 
b (& WebRoot 


图 5.5 创建 servlet & 图 5.6 src 下 的 包 


5.2 JavaBean 


Java EE 程序 是 基于 组 件 开发 的 ,就 好 像 是 我 们 小 时 候 玩 的 积木 一 样 ,如 图 5. 7 
所 示 。 


积木 块 
5.7 堆积 木 


从 表面 看 各 个 积木 块 是 一 堆 毫 不 相干 的 小 木 块 而 已 ,但 是 经 过 我 们 精心 的 设计 和 合 
理 的 安排 ,就 可 以 使 用 这 些 看 似 毫 不 相干 的 木 块 组 装 成 我 们 想 要 的 建筑 。 

在 程序 中 也 同样 存在 类 似 的 道理 ,Java 是 一 种 面向 对 象 的 编程 语言 ,在 设计 和 解决 
问题 时 ,都 是 以 面向 对 象 的 思想 进行 的 。 例 如 .数据 库 连接 类 ,在 这 个 类 中 定义 了 连接 方 
法 和 关闭 方法 ,对 于 这 个 类 来 说 , 它 的 使 命 就 是 建立 连接 和 关闭 连接 ,是 程序 的 一 个 组 成 
部 分 ,就 和 一 个 积木 块 在 一 个 积木 作品 中 的 作用 是 一 样 的 。 一 个 积木 作品 是 由 很 多 个 相 
同 或 者 不 同 的 积木 块 组 成 的 ,而 程序 同样 是 由 很 多 的 JavaBean 组 成 的 。 
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在 程序 中 进行 保存 数据 到 数据 库 表 中 时 ,保存 的 数据 通常 是 以 参数 的 形式 传递 给 业 
务 方 法 的 ,下 面 这 段 代 码 是 完成 往 数据 库 插入 通讯 录 数 据 的 业务 方法 ,代码 如 示例 5.1 
所 示 。 

示例 5.1 


public int  insertBook (String name, String sex, String phone, String address, String 
MobilePhone) 
f 
try { 
con =ConnectionManager.getConnction (); 
String sql ="insert into book values (?,?,?,?,?) "; 
pStatement - con.prepareStatement (strSql); 
pStatement.setString(1l, name); 


// 设 置 其 他 参数 值 


result -pStatement.executeUpdate () ; 
) 
catch (SQLException sqlE) 
{ Sq1E.printStackTrace|(); ) 
return result; 


} 


为 了 提高 代码 的 重用 性 ,来 实现 业务 方法 的 时 候 , 把 参数 值 传 递 给 方法 ,再 为 SQL 
语句 中 的 参数 赋值 ,从 而 实现 对 数据 库 的 操作 。 但 是 如 果 操 作 的 数据 库 表 的 字段 相当 多 
(如 100 个 字段 ) ,该 怎么 办 呢 ? 如 果 还 以 类 似 的 方法 进行 传递 参数 , 那 就 要 传递 100 个 
参数 ,在 编写 程序 的 时 候 , 如 果 出 现 100 个 参数 是 不 可 思议 的 。 

从 面向 对 象 的 角度 考虑 这 个 问题 就 简单 了 , 当 业 务 方法 想 操 作 数 据 库 表 时 ,只 要 传 
递 给 该 方法 一 个 与 表 对 应 的 实例 对 象 就 可 以 了 。 在 该 对 象 中 包含 着 表 中 每 个 字段 的 值 ， 
而 参数 只 有 一 个 ,传递 的 参数 就 是 Java 类 对 象 (JavaBean 对 象 ) 。 

JavaBean 是 Java 中 开发 的 可 以 跨 平台 的 重用 组 件 , 它 是 一 种 组 件 体 系 结构 。 
JavaBean 在 服务 器 端的 应 用 表现 出 了 强大 的 生命 力 ,在 JSP 程序 中 ,常用 来 封装 业务 逻 
辑 ,数据库 操 作 等 。 

JavaBean 实际 上 就 是 一 个 Java 类 ,这 个 类 可 以 重用 。 从 JavaBean 功能 上 可 以 分 为 
以 下 两 类 。 

(1) 封装 数据 。 

(2) 封装 业务 。 

JavaBean 一 般 情 况 下 要 满足 以 下 要 求 。 

(1) 是 一 个 公有 类 ,并 提供 无 参 的 公有 的 构造 方法 。 

(2) 属性 私有 。 

(3) 具有 公有 的 访问 属性 的 getter 和 setter 方法 。 

在 程序 中 ,程序 员 们 所 要 处 理 的 无 非 是 业务 逻辑 和 数据 ,而 这 两 种 操作 都 要 用 到 
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JavaBean。 一 个 应 用 程序 中 会 使 用 很 多 JavaBean, 由 此 可 见 ,JavaBean 是 应 用 程序 的 重 


要 组 成 部 分 。 

在 示例 5. 1 中 ,业务 要 求 往 通讯 录 的 表 BOOK 中 插入 数据 ,为 了 能 够 更 好 、 更 方便 地 
对 表 中 的 数据 进行 操作 ,需要 建立 订单 表 的 JavaBean 类 。 在 entity 包 下 创建 Book. java 
类 ,如 图 5.8 所 示 。 


Java Class 

Create a new Java class. Q 
Source folder: 。 AddressBook/src [Browse] 
Emm eni [rome .) 


回 Endosing type: [_ Browse... 


Name: BOOK| 
Modifiers: @ public © default © private © protected 


Superclass: javalang Object [rowse | 
es laia) 


Which method stubs would you like to create? 
E public static void main(Stringl] args) 
E Constructors from superclass 
[V] Inherited abstract methods 
Do you want to add comments? (Configure templates and default value here) 


@ Les.) (o) 


图 5.8 创建 BOOK 的 实体 类 


类 的 属性 如 示例 5.2 所 示 。 
示例 5.2 


package entity; 

public class Book { 
private int id; 
private String name; 
private String sex; 
private String phone; 
private String address; 
private String mobilePhone; 
private String company; 
private String comPhone; 
private String comAddress; 


private String relation; 
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private int userId; 


} 


对 于 属性 的 访问 方法 getter 和 setter, Eclipse 为 我 们 提供 了 一 个 方便 ,快捷 的 生成 
getter 和 setter 的 方法 ,操作 过 程 如 图 5.9 和 图 5. 10 所 示 。 


IÀ RE System Ubrary (50 
À Jove EE 3 Ubewes 
© WebRoce. 


Xe 一 


Li ECI- 


图 5.9 添加 getter 和 setter 方法 


通过 MyEclipse 工具 添加 getter 和 setter 方法 后 的 代码 如 示例 5. 3 所 示 。 
示例 5.3 


package entity; 

public class Book ( 
private int id; 
private String name; 
private String sex; 
private String phone; 
private String address; 
private String mobilePhone; 
private String company; 
private String comPhone; 
private String comAddress; 
private String relation; 
private int userId; 
public int getId() ( 

return id; 

) 
public void setId(int id) { 


回回 回回 回回 回回 图 图 图 


E Allow setters for final fields (remove final modifier from fields if necessary) 


Insertion point: 


Mnt À—MÀo) 


Sort by: 

, Access modifier 

| € public © protected © default © private 
回 fnal 回 synchronized 


El Generate method comments 
The format of the getters/setters may be configured on the Code Templates preference page. 


i 22 of 22 selected. 


@ (er) ma) 


图 5.10 选择 添加 getter 和 setter 方法 的 属性 


this.id -id; 

) 

public String getName() ( 
return name; 

} 

public void setName (String name) { 
this.name =name; 

} 

public String getSex() { 
return sex; 

) 

public void setSex (String sex) ( 
this.sex =sex; 

} 

public String getPhone() { 
return phone; 

) 

public void setPhone (String phone) ( 
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this.phone =phone; 

} 

public String getAddress() ( 
return address; 

) 

public void setAddress (String address) ( 
this.address - address; 

) 

public String getMobilePhone() ( 
return mobilePhone; 

} 

public void setMobilePhone (String mobilePhone) { 
this.mobilePhone =mobilePhone; 

¥ 

public String getCompany() { 
return company; 

) 

public void setCompany (String company) ( 
this.company = company; 

} 

public String getComPhone () { 
return comPhone; 

} 

public void setComPhone (String comPhone) { 
this.comPhone =comPhone; 

} 

public String getComAddress () { 
return comAddress; 

} 

public void setComAddress (String comAddress) { 
this.comAddress - comAddress; 

} 

public String getRelation() { 
return relation; 

) 

public void setRelation (String relation) ( 
this.relation -relation; 

) 

public int getUserId() { 
return userId; 

} 

public void setUserId(int userId) { 


this.userId -userId; 
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} 


依照 上 面 的 方法 ,再 创建 一 个 新 的 实体 类 Users. java, 其 代码 如 示例 5.4 所 示 。 
示例 5. 4 


package entity; 


public class Users { 
private int userId; 
private String userName; 
private String password; 
private String sex; 
private String realName; 
pe 
* Qreturn password 
*/ 
public String getPassword() ( 


return password; 


[x 
* (return realName 
*/ 
public String getRealName() ( 


return realName; 


Ln 
* (return sex 
*/ 
public String getSex() { 


return sex; 


Je 
* Qreturn userName 
*/ 
public String getUserName() ( 


return userName; 


/x% 
* (param realName 

* 要 设置 的 realName 
*/ 
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public void setRealName (String realName) { 
this.realName = realName; 


fex 
* (param sex 
* 要 设置 的 sex 
*/ 
public void setSex (String sex) { 


this.sex =sex; 


/x 
* Q@param userName 
* 要 设置 的 userName 
x 
public void setUserName (String userName) ( 


this.userName - userName; 


f 
* @ return userId 
*/ 
public int getUserId() { 


return userId; 


/x% 
* @param password 
* 要 设置 的 password 
*/ 


public void setPassword (String password) ( 
this.password - password; 


[ex 
* (param userId 
* 要 设置 的 userid 
*/ 
public void setUserId(int userId) { 
this.userId -userId; 
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5.3 JDBC 


JDBC 是 Java 数据 库 连接 技术 的 简称 ,是 为 各 种 常用 的 数据 库 提供 无 缝 连接 的 技 
术 ,JDBC 定义 了 Java 语言 同 各 种 SQL 数据 之 间 的 应 用 程 nanna | 
序 设 计 接 口 ,提高 了 软件 的 通用 性 ,如 图 5. 11 所 示 。 

为 了 方便 JDBC 使 用 ,有 一 系列 的 API 供 程序 调用 ,这 些 
类 与 接口 集成 在 java. sql 和 javax. sql 包 中 ,如 DriverManager 


JDBC API 


类 „Connection 接口 ,Statement 接口 、ResultSet 接口 。 tala 
同时 还 提供 了 不 同 的 JDBC 驱动 一 一 DriverManager， i | 
JDBC 驱动 | | JDBC 驱动 
应 用 程序 可 以 载 人 各 种 不 同 的 JDBC 驱动 。 本 章 数据 库 为 
SQL Server 2008 ,我 们 将 以 此 为 例 , 其 余 驱动 读者 可 以 查 
阅 相 关 文档 。 


JDBC API 可 做 三 件 事 : 与 数据 库 建 立 连 接 、 执 行 SQL 
语句 、 处 理 结果 ,如 图 5. 12 所 示 。 


图 5.11 JDBC 连接 数据 库 


N Connection 2 P d 
x | 3 数据 库 
| 服务 器 

( c meusa E] 4 


客户 端 


DriverManager A 


图 5.12 JDBC 的 工作 流程 


DriverManager: 依据 数据 库 的 不 同 , 管 理 JDBC 驱动 。 
Connection: 负责 连接 数据 库 并 担任 传送 数据 的 任务 。 
Statement; 由 Connection 产生 、 负 责 执行 SQL ifi], 
ResultSet: 负责 保存 Statement 执行 后 所 产生 的 查询 结果 。 
示例 5. 5 显示 了 JDBC 访问 数据 库 的 过 程 。 

示例 5.5 


try { 
Class.forName (JDBC 驱动 类 ); 
} catch (ClassNotFoundException e) { 
System.out.println ("无 法 找到 驱动 类 "); 
} 
try { 


on 4 Qon hh ae 
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7 Connection con- DriverManager.getConnection (JDBC URL, 数 据 库 用 户 名 ,密码 );8 
8 Statement stmt =con.createStatement (); 

9 ResultSet rs —stmt.executeQuery ("select a, b, c from Tablel");11 

10 while (rs.next()) ( 

11 int x -rs.getInt ("a"); 

12 String s -rs.getString("b"); 

13 float f -rs.getFloat ("c"); 

14 ] 

15 con.close(); 


16 } catch (SQLException e) { 
17  e.printStackTrace(); 
18 ] 


代码 解释 ， 

第 2 行 是 注册 JDBC 驱动。 

第 7 行 是 获得 数据 库 的 连接 ,其 中 JDBC URL 用 来 标识 数据 库 。 

第 9 行 是 发 送 SQL 语句 。 

第 11 行 是 得 到 处 理 结果 。 

第 15 行 是 释放 资源 。 

JDBC 驱动 由 数据 库 厂商 提供 ,一 共有 两 种 方式 : 桥 连 方式 和 纯 Java 驱动 方式 。 在 
个 人 开发 与 测试 中 ,可 以 使 用 JDBC-ODBC 桥 连 方式 ;在 生产 型 开发 中 ,推荐 使 用 纯 Java 
驱动 方式 ,如 图 5. 13 所 示 。 


Java 应 用 程序 


JDBC API 


JDBC-ODBC 纯 Java 驱 动 


5.13 JDBC 的 两 种 驱动 


JDBC-ODBC 桥 连 方式 是 将 对 JDBC API 的 调用 ,转换 为 对 另 一 组 数据 库 连接 API 
的 调用 。 优 点 是 可 以 访问 所 有 ODBC 可 以 访问 的 数据 库 , 缺 点 是 执行 效率 低 、 功 能 不 够 
强大 ,如 图 5. 14 所 示 。 

使 用 JDBC-ODBC 进行 桥 连 的 步骤 如 下 。 


Os 
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Java 应 用 程序 [ax] 
JDBC API [—]1JDBC-ODBC ] | ODBC API ODBC 

图 5.14 JDBC 的 桥 连 驱动 
CD 控制 面板 一 ODBC 数据 源 一 系统 DSN 中 配置 数据 源 。 
(2) 编程 ,通过 桥 连 方式 与 数据 库 建 立 连接 。 
语法 如 下 : 
Class.forName ("sun. jdbc.odbc.JdbcOdbcDriver"); 
Connection con - DriverManager.getConnection ("jdbc :odbc :addressBook" , "sa", "sa") ; 
纯 Java 驱动 是 由 JDBC 驱动 直接 访问 数据 库 , 优 点 : 100% Java, 快 又 可 跨 平 台 。 缺 

点 : 访问 不 同 的 数据 库 需 要 下 载 专用 的 JDBC 驱动 ,如 图 5. 15 所 示 。 
Java 应 用 程序 
JDBC API JDBC 驱动 

图 5.15 JDBC 纯 Java 驱动 
使 用 纯 Java 驱动 方式 进行 直 连 步 又 如 下 : 
CO 下 载 数据 库 厂 商 提供 的 驱动 程序 包 。 
(2) 将 驱动 程序 包 引 入 工程 中 。 
(3) 编程 ,通过 纯 Java 驱动 方式 与 数据 库 建 立 连接 。 
语法 如 下 : 
String URL= "jdbc:microsoft:sqlserver://localhost:1433; DatabaseName- addressBook"; 
Class.forName ("com.microsoft.sqlserver.jdbc.SQLServerDriver"); 
Connection con - DriverManager.getConnection (URL, "sa", "sa") ; 
本 章 采用 纯 Java 驱动 方式 来 建立 数据 库 连 接 。 
下 面 来 详细 介绍 一 下 使 用 JDBC 访问 数据 库 的 步骤 。 
COD 加 载 驱动 。 
Class.forName ("com.microsoft.sqlserver.jdbc.SQLServerDriver"); 

这 将 显 式 地 加 载 驱动 程序 类 。 


(2) 打开 连接 。 与 数据 库 建 立 连 接 的 标准 方法 是 调用 DriverManager. getConnection 


(CURL) 方 法 。 该 方法 接受 含有 某 个 URL 的 字符 串 。 
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DriverManager 类 ( 即 所 谓 的 JDBC 管理 层 ) 将 尝试 找到 可 与 那个 URL. 所 代表 的 数 
据 库 进行 连接 的 驱动 程序 。DriverManager 类 存 有 已 注册 的 驱动 类 的 清单 。 当 调用 方法 
getConnection 时 , 它 将 检查 清单 中 的 每 个 驱动 程序 ,直到 找到 可 与 URL 中 指定 的 数据 
库 进 行 连接 的 驱动 程序 为 止 。 

代码 如 下 : 

String url= "jdbc:sqlserver://localhost:1433; DatabaseName=mydb"; 

String username- "sa"; 

String password- "sa"; 


Connection conn -DriverManager.getConnection(url, username, password); 


URL 里 的 字符 串 代 表 如 下 意义 : 

jdbc: JDBC 协议 。 

sqlserver: 连接 SQL Server 数据 库 。 

localhost: 数据 库 服务 器 所 在 IP。 

1433: 数据 库 使 用 的 端口 。 

DatabaseName: 连接 的 数据 库 实例 。 

Connection 对 象 代表 与 数据 库 的 连接 ,也 就 在 已 经 加 载 的 驱动 和 数据 库 之 间 建 立 
连接 。 

通过 DriverManager. getConnection 方法 可 以 获得 一 个 连接 。 

(3) 连接 一 旦 建立 就 可 以 使 用 这 个 连接 来 向 数据 库 发 送 SQL 语句 了 ,这 里 用 到 
Statement 接口 。 

一 般 用 下 面 两 个 类 向 数据 库 发 送 SQL 语句 : 


Statement 


PreparedStatement 


Statement; 由 方法 createStatement 所 创建 ,Statement 对 象 用 于 发 送 简单 的 SQL 


Statement 对 象 提供 两 个 方法 : 


executeUpdate () ; 
executeQuery () ; 


使 用 executeUpdate() 方 法 的 代码 如 下 所 示 : 


// 创 建 语句 对 象 

Statement stmt= conn.createStatement () 7 
// 增 删改 类 型 的 SQL 语句 

String sql= "insert delete update"; 

// 执 行 SQL 语句 ,返回 值 即 为 影响 的 行 数 
int number- stmt.executeUpdate (sql) ; 


使 用 executeQuery() 方 法 的 代码 如 下 所 示 : 
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// 执 行 查询 语句 

String sql= "select"; 

ResultSet rs- stmt .executeQuery (sql) ; 

PreparedStatement; 由 方法 prepareStatement Ff 8| £& , PreparedStatement 对 象 有 
可 能 比 Statement 对 象 的 效率 更 高 ,因为 它 已 被 预 编译 过 并 存放 在 那 以 供 将 来 使 用 。 和 
Statement 不 同 的 是 ,可 以 在 传递 SQL 语句 的 同时 传递 参数 。 


// 创 建 语 名 对象 

String sql= "insert into tablename values (? )"; 

PreparedStatement stem- conn.prepareStatement (sql) ; 

stmt.setString(1, /] Hj") ; 

int number- stmt.executeUpdate () ; 

如 果 执 行 增 \ 删 ` 改 语句 ,那么 将 得 到 一 个 整 型 的 返回 值 , 这 个 整 型 的 返回 值 表 示 本 
条 SQL 语句 执行 后 ,数据 库 里 几 行 数据 受 影响 。 

如 果 执 行 查询 语句 ,那么 将 得 到 一 个 结果 集 对 象 , 即 ResultSet 对 象 。 该 对 象 包含 本 
条 查询 语句 所 包含 的 值 。 

ResultSet 接口 提供 了 定位 行 的 指针 和 处 理 结果 集 的 方法 。 

1. 行 和 光标 

ResultSet 维护 指向 其 当前 数据 行 的 光标 。 每 调用 一 次 next 方法 ,光标 向 下 移动 一 
行 。 最 初 它 位 于 第 一 行 之 前 ,因此 第 一 次 调用 next 将 把 光标 置 于 第 一 行 上 ,使 它 成 为 当 
前 行 。 随 着 每 次 调用 next 导致 光标 向 下 移动 一 行 ,按照 从 上 至 下 的 次 序 获 取 ResultSet 
fi. TE ResultSet 对 象 或 其 父辈 Statement 对 象 关闭 之 前 .光标 一 直 保持 有 效 。 


ResultSet rs= stmt .executeQuery () 7 


rs.next(); 


2. 列 


方法 getX XX 提供 了 获取 当前 行 中 某 列 值 的 途径 。 当 定位 了 行 之 后 ,可 以 使 用 
getX XX 方法 来 获取 当前 行 的 某 列 值 。 

rs.getstring ("name"); 

rs.getstring (1); 

参数 可 以 是 我 们 需要 的 列 的 列 名 ,或 者 结果 集中 该 列 的 序号 。 

ResultSet 接口 提供 了 很 多 获取 列 值 的 方法 。 

在 使 用 的 时 候 可 以 参照 表 5. 1。 

上 述 方法 创建 的 结果 集 , 游 标 只 能 依次 向 下 移动 ,如 果 想 灵活 操作 游标 ,那么 需要 创 
建 可 滚动 的 结果 集 。 
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表 5.1 

返回 类 型 方法 名 称 返回 类 型 方法 名 称 
boolean next() byte getByte(String columnName) 
byte getByteCint columnIndex) Date getDate(String columnName) 
Date getDateCint columnIndex) double getDouble( String columnName) 
double getDouble(int columnIndex) float getFloat(String columnName) 
float getFloat(int columnIndex) int getInt(String columnName) 
int getIntCint columnIndex) long getLong(String columnName) 
long getLong(int columnIndex) String getString( String columnName) 
String getStringCint columnIndex) 


Statement createStatement- conn.createStatement (resultSetType, 


resultSetConcurrency); 


创建 结果 集 的 时 候 可 以 加 两 个 参数 ,说 明 如 下 : 


第 1 


个 : 设置 结果 集 是 否 可 滚动 。 


TYPE FORWARD ONLY: 不 可 滚动 。 
TYPE_SCROLL_INSENSITIVE: 可 滚动 ,不 敏感 (推荐 ) 。 
TYPE_SCROLL_SENSITIVE: 可 滚动 ,敏感 。 


第 2 


个 : 结果 集 是 否 可 更 新 。 


CONCUR_READ_ONLY: 只 读 ( 推 荐 ) 。 
CONCUR_UPDATABLE: 是 否 可 更 新 。 
如 果 选 择 了 可 滚动 的 结果 集 , 那 么 ResultSet 中 的 下 列 方法 ,也 可 以 供 我 们 使 用 。 


pub 
pub 
pub 
行 , 返 回 


pub 


ic boolean isFirst() : 判断 游标 是 否 指向 结果 集 的 第 一 行 。 

ic boolean isLast(): 判断 游标 是 否 指向 结果 集 的 最 后 一 行 。 

ic int getRow(): 得 到 当前 游标 所 指 行 的 行 号 , 行 号 从 1 开始 ,如 果 结 果 集 没有 
0。 

ic boolean previousO : 将 游标 向 上 移动 ,该 方法 返回 boolean 型 数据 , 当 移 到 结 


果 集 第 一 行 之 前 时 返回 false; 


pub 


pub 


ic void beforeFirstO : 将 游标 移动 到 结果 集 的 初始 位 置 , 即 在 第 一 行 之 前 。 
ic void afterLastO : 将 游标 移 到 结果 集 最 后 一 行 之 后 。 

ic void first() : 将 游标 移 到 结果 集 的 第 一 行 。 

ic void lastO ; 将 游标 移 到 结果 集 的 最 后 一 行 。 

ic boolean isAfterLastO ; 判断 游标 是 否 在 最 后 一 行 之 后 。 

ic boolean isBeforeFirstO ; 判断 游标 是 否 在 第 一 行 之 前 。 


pub 


ic boolean absolute(int row) : 将 游标 移 到 参数 row 指定 的 行 号 。 


注意 : 如 果 row 取 负 值 , 就 是 倒数 的 行 。 
absolute( 一 1) 表 示 移 到 最 后 一 行 。 

absolute( 一 2) 表 示 移 到 倒数 第 2 行 。 

当 移动 到 第 一 行 前 面 或 最 后 一 行 的 后 面 时 ,该 方法 返回 false, 
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学 习 完 了 JDBC 的 知识 后 ,在 项 目的 common 包 下 新 建 一 个 DBConnection 类 ,该 类 
是 负责 整个 项 目 与 数据 库 访问 的 通用 类 。 代 码 如 示例 5. 6 所 示 。 
示例 5.6 


package common; 
import java.sql.* ; 
public class DBConnection { 
private static Connection conn; 
private static final String DRIVER CLASS = " com. microsoft. sqlserver. jdbc. 
SQLServerDriver"; 
private static final String DATABASE URL = " jdbc: sqglserver://localhost: 1433; 
DatabaseName- addressBook"; 
private static final String DATABASE USRE - "sa"; 
private static final String DATABASE PASSWORD - "sa"; 
p 
» 返回 连接 
* 
* @ return Connection 
*7 
public static Connection getConnection() { 
try { 
Class.forName (DRIVER CLASS); 
conn - DriverManager.getConnection (DATABASE URL, 
DATABASE USRE, DATABASE PASSWORD); 


) catch (Exception e) ( 
e.printStackTrace(); 
} 


return conn; 


fex 
x 关闭 数据 库 连 接 
* 
ky 
public static void closeConnection|()í( 
try{ 
if(conn!=null) 
conn.close(); 
]catch (Exception e){ 


e.printStackTrace (); 


fex 
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* 关闭 Statement 对 象 
* 
* param stm 
*/ 
public static void closeStatement (Statement stm) { 
try{ 
if(stm!-null) 
stm.close(); 
Jcatch (Exception e) ( 


e.printStackTrace(); 


) 


fex 


* XH] PreparedStatement 对 象 


* 


* param ps 
*/ 
public static void closeStatement (PreparedStatement ps) { 
try{ 
if(ps!-null) 


ps.close(); 
Jcatch (Exception e) ( 


e.printStackTrace(); 


Hi 
[x 
* XH] Resultset 结果 集 对 象 
* 
* @param rs 
*/ 
public static void closeResultSet (ResultSet rs){ 
try{ 
if(rs!-null) 
rs.close(); 
Jcatch (Exception e)( 
e.printStackTrace (); 


} 


在 common 包 下 再 新 建 一 个 Validate 类 .该 类 是 对 一 个 字符 串 进行 非 空 判断 ,防止 


出 现 如 示例 5.7 所 示 的 空 串 代码 。 
示例 5.7 


public class Validate { 
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/x 
* 字符 处 理 方法 判断 字符 是 否 为 null 
* (param str 
* Qreturn strt "" 
*/ 

public static String validStringNull (String str) { 

return str — null ?"" : str; 
} 
} 


本 项 目 使 用 的 是 微软 的 SQL Server 2008 数据 库 , 采 用 纯 Java 连接 方式 ,因此 要 在 
项 目 中 加 载 Java 的 数据 库 包 sqljidbc4 ,该 包 可 从 网 上 下 载 ,加 载 方式 如 下 : 鼠标 在 目录 
AddressBook 上 布 击 ,选择 build path, 然 后 再 选择 “Add External Archives…”, 在 弹出 对 
话 框 中 选择 sqljdbe4 即 可 ,完成 后 ,该 包 加 入 到 了 Referenced Libraries 目录 下 ,如 
图 5. 16 所 示 。 


pr B = 
CIEE T TTE 


ret [Rr Wad Brome (tum Weh te | Mya Wb Brom S T zay] 
: "x9 *-oswllMiu 


EE - x &[RUIEIB[U 8-0- ^5 
rjv diei 2 6 LOAM Nb Yemene (2012428 T] 


B 


图 5.16 增加 sqljdbc4 


5.4 数据 库 Bean 


如 果 对 数据 库 的 操作 都 是 直接 在 JSP 页 面 中 进行 的 ,这 样 的 方式 是 极为 不 妥 的 。 首 
先是 没有 将 显示 与 实现 (业务 逻辑 操作 ) 相 分 离 , 这 样 的 程序 维护 起 来 相当 困难 。 其 次 代 
码 没有 实现 重复 使 用 ,在 每 个 对 数据 库 操作 的 页 面 中 都 写 了 数据 库 操作 代码 ,所 以 使 用 
JavaBean 可 以 实现 代码 重用 。 

在 项 目的 operation 包 中 增加 一 个 新 的 类 BookBo, 该 类 是 一 个 通讯 录 业 务 类 ,主要 
是 编写 查询 BOOK 表 的 方法 ,通过 数据 连接 类 获得 数据 连接 对 象 ,通过 参数 userld 写 出 
SQL 语句 ,以 进行 查询 数据 库 的 BOOK 表 中 与 当前 用 户 相 关 的 联系 人 的 信息 。 同 时 把 
通讯 录 的 对 象 保 存 到 List 集合 中 ,并 返回 List 集合 的 对 象 。 代 码 如 示例 5. 8 所 示 。 


MM 基于 的 在 线 通 讯 录 245 


示例 5.8 


package operation; 

import java.sql.Connection; 

import java.sql.PreparedStatement; 
import java.sql.ResultSet; 

import java.sql.Statement; 

import java.util.* ; 


import common.DBConnection; 


import entity.Book; 


public class BookBo ( 
private Connection conn; // 用 于 保存 数据 库 连 接 对 象 
private Statement stm; // 用 于 执行 sor 语句 
private PreparedStatement ps; 。 // 用 于 执行 SQL 语句 ( 预 处 理 ) 


private ResultSet rs; // 用 于 保存 查询 的 结果 集 
[e 
* 根据 用 户 的 ID 查询 用 户 相关 的 通讯 录 信息 
* Q param userId 
* @ return 通讯 录 信息 列表 
*/ 
public List selectAllBook (int userId) { 
List list =new ArrayList(); 
String sql -"select * from book where userId-" +userId; 
try { 
conn =DBConnection.getConnection () 7 
stm = conn.createStatement () 7 
rs = stm.executeQuery (sql); 
while (rs.next()) { 
Book book - new Book () ; 
book.setId (rs.getInt ("id")); 
book.setName (rs.getString("name")); 
book.setSex (rs.getString ("sex")); 
book.setPhone (rs.getString ("phone")); 
book.setAddress (rs.getString ("address")); 
book.setMobilePhone (rs.getString ("mobilePhone")); 
book.setCompany (rs.getString ("company") ) ; 
book.setComPhone (rs.getString ("comPhone")); 
book.setComAddress (rs.getString ("comAddress")); 


list.add (book); 
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} 
} catch (Exception e) { 
e.printStackTrace(); 
) finally ( 
DBConnection.closeResultSet (rs); 
DBConnection.closeStatement (stm) 7 
DBConnection.closeConnection (); 
J 
return list; 
) 
zi 
* 根据 用 户 的 ID 和 联系 人 与 用 户 关系 ,查询 通讯 录 信 息 
* @param userId 
* @param relation 
* G return 通讯 录 信 息 列 表 
*/ 
public List selectBookByRelation (int userId,String relation) ( 
List list - new ArrayList(); 
String sql - "select * from book where userId- ? and relation- ?"; 


try { 


conn - DBConnection.getConnection|(); 
ps -conn.prepareStatement (sql); 
ps.setInt (l, userId); 
ps.setString(2, relation); 

rs =ps.executeQuery () 7 


while (rs.next()) ( 
Book book - new Book () ; 
book.setId (rs.getInt ("id")); 
book.setName (rs.getString("name")); 
book.setSex(rs.getString("sex")); 
book.setPhone (rs.getString ("phone")); 
book.setAddress (rs.getString ("address")); 
book.setMobilePhone (rs.getString ("mobilePhone")); 
book.setCompany (rs.getString ("company")); 
book.setComPhone (rs.getString ("comPhone")) ; 
book.setComAddress (rs.getString ("comAddress")); 


list.add (book); 
} 


} catch (Exception e) { 
e.printStackTrace(); 
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) finally ( 
DBConnection.closeResultSet (rs); 
DBConnection.closeStatement (stm) ; 
DBConnection.closeConnection (); 
) 
return list; 
) 
fex 
* 根据 通讯 录 对 象 ,操作 数据 库 的 添加 功能 
* Q@param book 
* Qreturn 影响 数据 行 数 
*/ 
public int insertBook (Book book) ( 
String sql - "insert into book values(?,?,?2,2,2,?2,2,2,2,?2) "; 
int count =07 
try { 
conn =DBConnection.getConnection () 7 
ps =conn.prepareStatement (sql) ; 
ps.setString (l, book.getName ()) ; 
ps.setString(2, book.getSex()); 
ps.setString(3, book.getPhone ()); 
ps.setString(4, book.getAddress ()); 
ps.setString(5, book.getMobilePhone ()); 
ps.setString(6, book.getCompany ()) 7 
ps.setString(7, book.getComPhone () ) ; 
ps.setString(8, book.getComAddress()); 
ps.setString(9, book.getRelation()); 
ps.setInt (10, book.getUserId()); 
count —ps.executeUpdate () ; 
) catch (Exception e) ( 
e.printStackTrace(); 
) finally ( 
DBConnection.closeStatement (ps) ; 
DBConnection.closeConnection () ; 
) 


return count; 


) 
nz 
* 根据 通讯 录 ID 删除 相关 信息 
* @param id 
* @ return 影响 数据 库 行 数 
*/ 
public int deleteBookById (String id) ( 


248 Miss sn 


String sql - "delete from book where id-?"; 

int count =07 

try i 
conn = DBConnection.getConnection() ; 
ps -conn.prepareStatement (sql) ; 
ps.setString(1l, id); 
count —ps.executeUpdate () ; 

) catch (Exception e) ( 
e.printStackTrace(); 

) finally ( 
DBConnection.closeStatement (ps) ; 
DBConnection.closeConnection(); 

} 


return count; 


} 


在 项 目的 operation 包 中 再 增加 一 个 新 的 类 UserBo, 该 类 是 一 个 用 户 业 务 类 ,主要 是 
编写 查询 Users 表 的 方法 ,通过 数据 连接 类 获得 数据 连接 对 象 ,以 参数 userName 和 
password 设置 完整 的 SQL 语句 ,执行 SQL 语句 ,操作 数据 库 。 代 码 如 示例 5.9 所 示 。 

示例 5.9 


package operation; 

import java.sql.Connection; 

import java.sql.PreparedStatement; 
import java.sql.ResultSet; 

import common.DBConnection; 


import entity.Users; 


public class UserBo ( 


private Connection conn; // 用 于 保存 数据 库 连 接 对 象 
private PreparedStatement ps; 。 // 用 于 执行 SQL 语句 ( 预 处 理 ) 
private ResultSet rs; // 用 于 保存 查询 的 结果 集 

pe 


* 根据 用 户 名 和 密码 ,判断 该 用 户 是 否 存在 
* @param userName 
* @param password 
* Qretun 用 户 对 象 
=z 
public Users validUser (String userName, String password) { 
Users user =null; 
String sql ="select * from users where userName- ? and password- ?"; 
try ( 
conn = DBConnection.getConnection() ; 
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ps =conn.prepareStatement (sql); 
ps.setString(l, userName); 


ps.setString (2, password); 


rs -ps.executeQuery () ; 

if (rs.next()) ( 
user -new Users(); 
user.setUserld (rs.getInt ("userId")); 
user.setUserName (rs.getString ("userName")); 
user.setRealName (rs.getString ("realName")); 


user.setSex (rs.getString("sex")); 


) catch (Exception e) ( 
e.printStackTrace|(); 

) finally ( 
DBConnection.closeResultSet (rs); 
DBConnection.closeStatement (ps) ; 
DBConnection.closeConnection(); 

) 


return user; 


5.5 Servlet 技术 
使 用 JSP 技术 开发 Web 程序 的 时 候 . 所 要 做 的 事情 就 是 在 JSP 页 面 中 写 入 Java 代 


码 , 当 服务 器 运行 JSP 页 面 时 ,执行 Java 代码 ,动态 获取 数据 ,并 生成 HTML 代码 ,最 终 
显示 在 客户 端 浏览 器 上 。 使 整个 过 程 如 图 5. 17 所 示 。 


请 求 
m j — 


生成 


Cis» cs (esr) 


5.17 使 用 JSP 技术 开发 Web 程序 


在 JSP 技术 出 现 之 前 ,如 果 想 生成 HTML. 页 面 , 只 有 在 服务 器 端 运行 Java 程序 ,并 
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输出 (打印 ) HTML. 格式 内 容 。 运行 在 服务 器 端的 Java 程序 就 是 Servlet, id EE AH 
图 5. 18 所 示 。 


Es [Lu 


saf 27 


图 5.18 使 用 Servlet 生成 页 面 的 过 程 


Servlet 是 一 个 Java 程序 ,是 在 服务 器 端 运行 以 处 理 客 户 端 请 求 并 做 出 响应 的 程序 。 
到 目前 为 止 , 我 们 已 经 了 解 了 Servlet 的 功能 和 特点 ,也 知道 了 Servlet 的 定义 ,但 是 
Servlet 到 底 是 什么 样子 呢 ? 什么 样 的 Java 程序 才 是 Servlet WÈ? 

下 面 我 们 来 认识 一 下 Servlet lE ,Servlet 的 常见 代码 如 示例 5. 10 所 示 。 

示例 5. 10 


import java.io.* ; 
import javax.servlet.* ; 
import javax.servlet.http. * ; 
public class HelloServlet extends HttpServlet ( 
public void doGet (HttpServletRequest request, 
HttpServletResponse response) 
throws ServletException, IOException ( 
response.setContentType ("text/html;charset- gb2312") ; 
PrintWriter out -response.getWriter(); 
out.println("« HTML» "); 
out.println("« HEAD» < TITLE» Servlet« /TITLE> < /HEAD> ") ; 
out.println("« BODY» "); 
out.println(" 你 好 ,欢迎 来 到 Servlet 世界 "); 
out.println("« /BODY> "); 
out.println("« /HTML» ") ; 
out.close(); 
) 
J 


如 果 要 想 使 用 Servlet。 必 须要 导入 三 个 包 : import java. io. * , import javax 
. servlet. * ,import javax. servlet. http. * 。 创 建 Servlet 的 类 必须 继承 HttpServlet ,在 
类 里 要 实现 doGet() 或 者 doPost() 方 法 .以 处 理 客 户 端 要 求 。 

Servlet 是 接受 客户 端 请 求 , 对 请 求 的 数据 进行 处 理 , 并 对 客户 端 做 出 响应 的 程序 ,也 
就 是 说 ,如 果 想 运行 一 个 Servlet 程序 ,必须 要 在 客户 端 发 送 一 个 请 求 ( 可 以 通过 页 面 提 


2s 基于 的 在 线 通 讯 录 251 


交 表 单 ,也 可 以 在 浏览 器 的 地 址 栏 内 输入 Servlet 的 访问 地 址 ) 。 

在 HTML 中 的 FORM 表单 的 提交 方法 有 两 种 : GET, POST。 这 两 种 方法 在 提交 
时 有 差异 ,因此 在 创建 Servlet 时 ,必须 要 继承 HttpServlet, HttpServlet 作为 一 个 抽象 类 
用 来 创建 用 户 自己 的 Servlet,HttpServlet 的 子 类 至 少 重 写 以 下 方法 中 的 一 个 : doGet() 
或 者 doPost()。HttpServlet 类 提供 doGet() 方 法 处 理 FORM 表单 的 GET 请求, 并 提供 
doPost() 方 法 处 理 POST 请 求 。 

下 面 在 项 目 中 创建 一 个 登录 页 面 ,然后 使 用 Servlet 接收 客户 端 提 交 的 数据 进行 

在 项 目 WebRoot 中 新 建 一 个 JSP 页 面 ,命名 为 login. jsp, 该 页 面 代码 如 示例 5. 11 
所 示 ,示例 中 去 掉 了 HTML 美工 部 分 ,大 家 可 以 自行 到 源 代码 中 进行 查找 。 

示例 5.11 


« $8 page language= "java" import="java.util. * " pageEncoding- "gb2312"$ > 
< FORM name= "login" action- "LoginServlet"» 
< TABLE» 
<TR> 
<TD style= "color:# 4c4743;line- height:160$ ;" valign= "top"width- "30$ "> 
用 户 名 : 
</TD> 
<TD style="color:# 4c4743;line- height:160% ;" valign="top"> 
< INPUT type="text" name= "userName" /> 
</TD> 
</TR> 
<TR> 
<TD style= "color:# 4c4743;line- height:160% ;" valign="top" width= "30$ "> 
密 snbsp;snbsp; 码 
</TD> 
<TD style- "color:# 4c4743;line- height:160$ ;" valign- "top"> 
< INPUT type- "text" name- "password" /> 
</TD> 
</TR> 
<TR> 
< TD style="color: # 4c4743; line- height: 160% ;" valign="top" width= 
"30% "> 
< INPUT type="submit" value- "提交 " /> 
« /TD» 
<TD style= "color:£ 4c4743;line- height:160$ ;" valign="top"> 
< INPUT type- "reset" value- " 重 置 " /> 
« /TD» 
</TR> 
< /TABLE> 
< /FORM> 
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如 何 创 建 一 个 Servlet 来 接收 客户 端 提 交 的 数据 呢 ? 

使 用 MyEclipse 的 Servlet 向 导 创 建 Servlet 步骤 如 下 。 

CD 在 项 目的 sre 下 servlet 包 右 击 ,新 建 一 个 Servlet. 命名 为 LoginServlet, 如 
图 5. 19 所 示 。 


| Servlet Wizard 
Create a new Servlet class. 


Source folder: AddressBook/src. 


Package: serviet 
[P] Endosing type: 


LoginServlet 
@ public © default © private © protected 
回 abstract [final [static 


javax.servlethttp.HttpServiet 


Which method stubs would you like to create? 
Inherited abstract methods — (V]doGet) 
[V] Constructors from superclass [V] doPost0 
[V]initQ and destroy 回 doput0 
回 doDelete0 回 getservletnfo0 


5.19 创建 Servlet 


(2) 完善 LoginServlet. java 代码 ,使 其 接收 客户 端 数据 ,并 进行 验证 。 代 码 如 示 
例 5. 12 所 示 。 
示例 5. 12 


package servlet; 
import java.io.IOException; 
import java.io.PrintWriter; 


import javax.servlet.ServletException; 

import javax.servlet.http.HttpServlet; 

import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 


import common.Validate; 
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import entity.Users; 
import operation.UserBo; 
[e 
* 处 理 用 户 登 录 的 Servlet 
*/ 
public class LoginServlet extends HttpServlet { 
private static final long serialVersionUID =- 8862471510293363964L; 
public void doGet (HttpServletRequest request, HttpServletResponse 
response) 
throws ServletException, IOException ( 
this.doPost (request, response); 


public void doPost (HttpServletRequest request, HttpServletResponse 
response) 
throws ServletException, IOException ( 
// 中 文 处理 
response.setContentType ("text/html;charset= gb2312") ; 
// 获 取 用 户 输入 信息 
String userName- Validate.validStringNull (request .getParameter 


("userName")); 


String password -Validate.validStringNull( request.getParameter 


("password")); 


// 创 建 用 户 业 务 类 对 象 ,并 调用 方法 进行 验证 当前 用 户 是 否 为 合法 用 户 


UserBo userBo- new UserBo(); 
Users user- userBo.validUser (userName, password); 
if(user!-null)( 

// 合 法 , 则 保存 当前 用 户 信息 到 session 中 


request.getSession().setAttribute ("user", user); 


request .getRequestDispatcher ("SelectServlet").forward (request, 


response); 
Jeise( 
// 如 果 不 合法 , 则 给 出 提示 ,并 返回 到 登录 页 面 


PrintWriter out- response.getWriter(); 


out.print ("< SCRIPT type- '' language- 'javascript'» alert (' 用 户 名 或 密码 错 


误 , 请 重新 输入 。') ;history.go (- 1) ;« /SCRIPT» ") ; 
out.flush(); 


out.close(); 


} 


如 果 客 户 端 使 用 GET 方法 提交 请 求 . 那 么 所 有 的 接收 数据 、 处 理 数据 和 响应 代码 都 
写 在 doGet() 方 法 体 中 , 同 理 ,如 果 客 户 端 使 用 POST 方法 提交 请 求 ,那么 就 把 所 有 代码 
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写 在 doPost() 方 法 体 中 。 这 样 就 可 以 处 理 客户 的 请 求 ,并 做 出 相应 的 响应 。 

但 是 FORM 表单 提交 的 方法 有 两 种 ,如 何 能 保证 提交 的 方法 和 接收 的 方法 都 能 对 
应 上 呢 ? 简单 的 处 理 办 法 就 是 : 把 处 理 代码 都 写 在 doPost() 方 法 中 ,之 后 在 doGet() 方 
法 中 ,这 样 就 保证 了 无 论 客户 端 使 用 什么 样 的 方法 提交 请 求 ,程序 都 能 正确 接收 到 数据 。 

假如 有 多 个 客户 同时 访问 通讯 录 , 都 在 通讯 录 加 上 自己 好 友 的 信息 。 当 Servlet E 
器 接收 到 请 求 后 ,如 何 判 断 是 哪个 客户 端 发 出 的 请 求 ,从 而 把 记录 加 入 到 这 个 客户 相对 
应 的 好 友 表 中 呢 ? HTTP 协议 是 无 状态 的 ,也 就 是 说 ,如 果 仅 使 用 HTTP 协议 是 不 能 够 
进行 用 户 状态 跟踪 的 。 

在 Java Servlet API 中 引入 Session 机 制 来 跟踪 客户 的 状态 。Session 指 的 是 在 一 段 
时 间 内 ,单个 用 户 与 Web 服务 器 的 一 连 串 相关 的 交互 过 程 。 在 一 个 Session 中 ,客户 可 
能 会 多 次 请 求 访问 同一 个 网 页 ,也 有 可 能 请 求 访问 各 种 不 同 的 服务 器 资源 。 例 如 ,在 电 
子 邮件 应 用 中 ,从 一 个 客户 登录 到 电子 邮件 系统 开始 ,经 过 收 信 、 写 信和 发 信 等 一 系列 操 
作 , 直 至 退出 邮件 系统 ,整个 过 程 为 一 个 Session。 再 比如 ,在 网 上 书店 应 用 中 ,从 客户 开 
始 购物 ,到 最 后 结账 ,整个 过 程 为 一 个 Session. TE Servlet API 中 定义 了 javax. servlet 
. http. HttpSession 接口 , Servlet 容器 必须 实现 这 个 接口 。 当 一 个 Session 开始 时 ， 
Servlet 容器 创建 一 个 HttpSession 对 象 . 并 同时 从 中 为 其 开辟 一 个 空间 ,在 HttpSession 
对 象 中 可 以 存放 客户 状态 的 信息 (如 购物 车 ),Servlet 容器 为 HttpSession 分 配 一 个 唯一 
标识 符 , 称 为 SessionID。Servlet 容器 把 SessionID 保存 在 客户 的 浏览 器 中 。 每 次 客户 发 
出 HTTP 请 求 时 , Servlet 容器 可 以 HttpRequest 对 象 中 读 取 SessionID, 然后 根据 
SessionID 找到 相应 的 HttpSession 对 象 , 从 而 获取 客户 的 状态 信息 。 

在 示例 5. 12 中 , 当 用 户 登录 成 功 后 ,要 把 登录 用 户 的 信息 保存 起 来 ,就 使 用 到 了 
Session。 

// 合 法 , 则 保存 当前 用 户 信息 到 Session 中 

request.getSession().setAttribute ("user", user); 

上 述 代码 是 运用 request. getSession() 方 法 将 用 户 对 象 user 保存 到 Session 中 ,并 命 
名 为 user。 这 样 在 其 他 页 面 如 果 要 判断 当前 访问 的 用 户 是 谁 ,就 可 以 使 用 以 下 语句 来 进 
行 读 取 : 

Users user = (Users) session.getAttribute ("user"); 


下 面 为 在 线 通 讯 录 程 序 增加 一 个 Servlet ,命名 为 AddServlet. A) ££ £ JR RI E XR — tE. 
其 代码 如 示例 5. 13 所 示 。 

示例 5. 13 

package servlet; 


import java.io.IOException; 


import java.io.PrintWriter; 


import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
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import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 


import common.Validate; 

import entity.Book; 

import entity.Users; 

import operation.BookBo; 

[ex 

* 处 理 通讯 录 添 加 功能 的 Servlet 

*/ 

public class AddServlet extends HttpServlet { 


f 
* 
*/ 
private static final long serialVersionUID - 1L; 


p 
* Destruction of the servlet. «BR» 
*4 
public void destroy() ( 
super.destroy(); //Just puts "destroy" string in log 
//Put your code here 


public void doGet (HttpServletRequest request, HttpServletResponse 
response) 
throws ServletException, IOException ( 


this.doPost (request, response); 


public void doPost (HttpServletRequest request, HttpServletResponse 
response) 
throws ServletException, IOException ( 
// 中 文 处 理 
request.setCharacterEncoding ("gb2312") ; 
response.setContentType ("text/html;charset- gb2312"); 
// 获 取 用 户 输入 数据 
String name- Validate.validStringNull (request.getParameter ("name")) ; 
String sex-Validate.validStringNull (request .getParameter ("sex")); 
String phone- Validate .validStringNull (request .getParameter ("phone") ) ; 
String address-Validate.validStringNull (request.getParameter 
("address")); 
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String mobilePhone- Validate.validStringNull (request.getParameter 
("mobilePhone")); 

String company- Validate .validStringNull (request .getParameter 
("company") ) ; 

String comPhone- Validate.validStringNull (request .getParameter 
("comPhone") ) ; 

String comAddress- Validate .validStringNull (request .getParameter 
("comAddress")); 

String relation- Validate.validStringNull (request .getParameter 
("relation")); 

// 封 装 数据 

Book book- new Book () ; 

book.setName (name) ; 

book.setSex (sex); 

book.setPhone (phone) ; 

book.setAddress (address) ; 

book.setMobi lePhone (mobilePhone); 

book.setCompany (company) ; 

book.setComPhone (comPhone) ; 

book.setComAddress (comAddress) ; 

book.setRelation (relation); 

Users user- (Users)request.getSession().getAttribute ("user"); 
book.setUserld (user.getUserlId()); 


// 创 建 通讯 录 的 业务 类 对 象 , 并 调用 添加 方法 
BookBo bookBo- new BookBo () ; 
int count- bookBo.insertBook (book); 


PrintWriter out= response.getWriter(); 


if (count »0) ( 
// 添 加 成 功 
out. print ("< SCRIPT type= '' language- ' javascript ' > alert (' 添 加 成 功 。'); 
location.href= 'addBook.jsp'; </SCRIPT>"); 
Jelse{ 
// 添 加 失败 
out.print ("< SCRIPT type= '' language- ' javascript ' > alert (' 添 加 失败 。'); 
history.go(-1); </SCRIPT>"); 
} 
out.flush(); 


out.close(); 


/xx 


* Initialization of the servlet. «BR» 
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* 
* (throws ServletException if an error occure 
*/ 

public void init() throws ServletException { 

//Put your code here 


) 


该 Servlet 的 作用 是 向 通讯 录 中 插入 相应 的 用 户 信息 。 

下 面 再 为 在 线 通讯 录 程 序 增 加 一 个 Servlet ,命名 为 SelectServlet ,创建 步骤 和 上 述 
一 样 , 其 代码 如 示例 5. 14 所 示 。 

示例 5.14 


package servlet; 


import java.io.IOException; 
import java.util.List; 


import javax.servlet.ServletException; 

import javax.servlet.http.HttpServlet; 

import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import javax.servlet.http.HttpSession; 


import common.Validate; 
import entity.Users; 
import operation.BookBo; 


n 
* 处 理 查询 通讯 录 功 能 的 Servlet 
*/ 


public class SelectServlet extends HttpServlet ( 


private static final long serialVersionUID - 1L; 


public void doGet (HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException ( 


this.doPost (request, response); 


public void doPost (HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 


258 Ms 


// 中 文 处 理 
response.setContentType ("text/html;charset= gb2312") ; 
// 判 断 用 户 是 否 为 登录 用 户 


HttpSession session = request.getSession (false); 


if (session — null || session.getAttribute ("user") — null) ( 
// 如 果 不 是 登录 用 户 , 则 返回 到 首页 ,进行 登录 
response.sendRedirect ("index.jsp"); 

) else ( 
// 获 取 参 数 relation 值 
String relation -Validate.validStringNull (request 

-getParameter ("relation")); 

Users user = (Users) session.getAttribute ("user"); 
int userId -user.getUserId(); 
BookBo bookBo =new BookBo () ; 
List list -null; 


if ("".equals (relation)) ( 
// 如 果 relation 为 "", 则 查询 当前 用 户 相关 的 所 有 通讯 录 信息 
list -bookBo.selectAllBook (userId); 
) eise ( 
// 如 果 relation 的 值 不 为 "", 那 查询 与 当前 用 户 的 关系 为 relation 值 的 通讯 
录 信 息 
list =bookBo.selectBookByRelation (userId, relation); 


request.setAttribute ("bookList", list); 
request .getRequestDispatcher ("bookContent . jsp") . forward (request, 


response); 


} 


该 Servlet 的 作用 是 向 通讯 录 里 查找 用 户 信 息 。 该 类 用 于 控制 bookContent. jsp 页 
面 (后 面 创建 ), 显示 BOOK 表 的 内 容 。 首先 验 证 当前 用 户 是 否 为 合法 用 户 , 获取 
Session. ,并 判断 Session 是 否 存 在 Users 对 象 。 然 后 调用 BookBo. Java 对 象 ,调用 
selectAllbook(int userId) ,得 到 所 有 BOOK 表 内 数据 List 集合 。 把 List 集合 保存 到 
Request 对 象 内 ,并 将 请 求 转发 给 bookContent. jsp 页 面 。 

值得 注意 到 是 在 获取 Session 时 ,要 使 用 HttpSession session — request. getSession 
(false) ,这 是 为 了 防止 重新 创建 会 话 。 

下 面 再 为 在 线 通讯 录 程 序 增加 一 个 Servlet, 命 名 为 DeleteServlet ,创建 步 又 和 上 述 
一 样 ,其 代码 如 示例 5. 15 所 示 。 
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示例 5.15 


package servlet; 


import java.io.IOException; 


import java.io.PrintWriter; 


import javax.servlet.ServletException; 

import javax.servlet.http.HttpServlet; 

import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 


import common.Validate; 

import operation.BookBo; 

Jn 

* 处 理 通讯 录 删 除 功能 的 Servlet 

*/ 

public class DeleteServlet extends HttpServlet ( 


private static final long serialVersionUID - 1L; 


public void doGet (HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException ( 
this.doPost (request, response); 


public void doPost (HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException ( 


// 中 文 处 理 
response.setContentType ("text/html;charset- gb2312"); 
PrintWriter out —response.getWriter(); 


// 获 取 参 数 ia 值 


String id -Validate.validStringNull (request .getParameter ("id")); 
// 创 建 通讯 录 业 务 类 对 象 ,并 调用 删除 方法 ,删除 参数 ia 指定 的 信息 


BookBo bo =new BookBo () ; 
int count =bo.deleteBookById (id); 
if (count >0) ( 


// 删 除 成 功 后 ,转向 到 查询 功能 的 servlet, 以 查询 通讯 录 信 息 


request.getRequestDispatcher ("SelectServlet") .forward (request, 


response); 
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//out.print ("< script type- '' language- 'javascript'» alert ("删除 成 功 。"'); 
location.href- 'index.jsp? url- content' < /SCRIPT» "); 
Jelse( 
// 删 除 失败 ,返回 到 前 一 个 页 面 
out.print ("< script type= '' language- ' javascript '> alert (' 删 除 失 败 。'); 
history.go(-1); </SCRIPT>"); 


} 

该 Servlet 的 作用 是 在 通讯 录 中 删除 用 户 信息 。 

至 此 我 们 前 面 创建 的 common 包 、entity 包 、operation 包 ,Servlet 包 增 加 内 容 完毕 ， 
如 图 5. 20 所 示 。 


4 i$ AddressBook 
4 íB src 
4 iH common 
> [) DBConnectionjava 
» D Validatejava 
4 Bi entity 
> 国 Bookjava 


b D Usersjava 
4 [B operation 

b JÌ BookBojava 

b UserBojava 


4 [Bi servlet 
» D) AddServletjava. 
» Detention 
» |j) LoginServletjava. 
b [À SelectServletjava 


图 $.20 四 个 包 


增加 完 Servlet 后 ,在 WebRoot 目录 下 Web-INF 目录 下 .将 有 一 个 web. xml X fF. 
这 个 文件 是 配置 了 刚 增 加 的 Servlet 内 容 , 如 下 所 示 : 


<?xml version- "1.0" encoding- "UTF- 8"?> 
«web- app version- "2.5" 
xmlns- "http: //java.sun.com/xml/ns/javaee" 
xmlns:xsi- "http: //www.w3.org/2001/XMLSchema- instance" 
xsi:schemaLocation- "http://java.sun.com/xml/ns/javaee 
http://java.sun.com/xml/ns/javaee/web- app 2 5.xsd"» 
< servlet> 
«description? This is the description of my J2EE component« /description> 
<display- name» This is the display name of my J2EE component« /display- name> 
< servlet- name» LoginServlet« /servlet- name» 
< servlet- class» servlet.LoginServlet« /servlet- class? 
< /servlet» 


«servlet» 
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<description> This is the description of my J2EE component« /description» 
<display- name» This is the display name of my J2EE component« /display- name» 
< servlet- name» AddServlet« /servlet- name» 
< servlet- class» servlet.AddServlet« /servlet- class» 

< /servlet» 

«servlet» 
<description> This is the description of my J2EE component« /description^ 
«display- name» This is the display name of my J2EE component« /display- name» 
< servlet- name» SelectServlet« /servlet- name» 
< servlet- class» servlet.SelectServlet« /servlet- class? 

< /servlet» 

«servlet» 
«description» This is the description of my J2EE component« /description» 
« display- name» This is the display name of my J2EE component« /display- name» 
< servlet- name» DeleteServlet« /servlet- name» 
< servlet- class»? servlet.DeleteServlet« /servlet- class» 


< /servlet» 


X«servlet-mapping» 
< servlet- name» LoginServlet« /servlet- name» 
«url- pattern» servlet /LoginServlet« /url- pattern? 
< /servlet- mapping» 
X«servlet-mapping» 
< servlet- name» AddServlet« /servlet- name» 
<url-pattern> servlet /AddServlet« /url- pattern» 
< /servlet- mapping» 
X«servlet-mapping» 
< servlet- name» SelectServlet« /servlet- name> 
«url-pattern» servlet /SelectServlet« /url- pattern? 
< /servlet- mapping» 
X«servlet-mapping» 
< servlet- name» DeleteServlet« /servlet- name> 
<url-pattern> servlet /DeleteServlet« /url- pattern? 
< /servlet- mapping» 
«welcome- file- list» 
«welcome- file> index.jsp« /welcome- file» 
« /welcome- file- list» 


< /web- app» 


其 中 黑体 部 分 是 对 Servlet 的 映射 ,我们 需要 将 其 修改 一 下 ,去 掉 前 组 ,这 样 在 页 面 


中 使 用 就 比较 方便 了 ,修改 如 下 : 


<servlet-mapping> 
< servlet- name> LoginServlet< /servlet- name» 
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<url-pattern> /LoginServlet< /url- pattern> 
</servlet-mapping> 
<servlet-mapping> 
< servlet- name» AddServlet< /servlet- name» 
«url- pattern» /AddServlet« /url- pattern» 
< /servlet- mapping» 
X«servlet-mapping» 
< servlet- name» SelectServlet« /servlet- name» 
«url- pattern» /SelectServlet« /url- pattern? 
< /servlet- mapping» 
X«servlet-mapping» 
< servlet- name» DeleteServlet« /servlet- name» 
«url- pattern» /DeleteServlet« /url- pattern» 
< /servlet- mapping» 
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下 面 工作 是 在 项 目 WebRoot 目录 下 添加 新 的 JSP 页面, 命名 为 index.jsp, 同 时 再 添 
加 left. jsp、tag.jsp、banner. html。 其 中 left. jsp 页 面 是 左 侧 可 供用 户 查询 通讯 录 时 选择 
好 友 类 别 ,tag.jsp 是 放 在 右 侧 允许 用 户 添加 人 员 和 查询 人 员 使 用 ,banner. html 页 面 是 
显示 一 个 动画 。 

tag. jsp 页 面 主要 有 以 下 功能 。 

CD 为 “主页 ”添加 超 链接 ,链接 到 index. jsp 页 面 。 

(2) 为 “收藏 ”添加 javascript 脚本 ,实现 “添加 到 搜 藏 夹 "的 功能 。 

(3) 为 “添加 ”增加 超 链 接 ,链接 到 addBook. jsp 页 面 。 

(4) 为 “查询 ”增加 超 链接 ,链接 到 selectServlet ,以 实现 查询 联系 人 信息 的 功能 。 

这 里 的 查询 链接 不 传递 任何 参数 ,调用 BookBo. java 中 的 selectAllBook() 方 法 ,与 
left. jsp 中 的 分 类 查询 不 同 。 

left. jsp 页 面 中 的 图 片 超 链 接 如 下 : 

(1) 家 人 SelectServlet? relation 一 1 

(2) 领导 SelectServlet? relation 一 2 

(3) 师长 SelectServlet? relation 一 3 

(4) 朋友 SelectServlet? relation 一 4 

(5) 同学 SelectServlet? relation 一 5 

(6) 同事 SelectServlet? relation— 6 

在 SelectServlet 类 中 获取 left. jsp 提交 的 relation 参数 值 ,并 以 参数 形式 调用 
BookBo. java 中 的 selectBookByRelation(int relation) ,以 返回 Book 对 象 的 List 集合 , 然 
后 把 List 集合 保存 到 request 范围 内 ,并 转发 给 bookContent. jsp 页 面 。 
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三 个 页 面 合 在 一 起 加 入 到 index 页 面 .效果 图 如 图 5. 21 所 示 。 


图 5.21 index AMARA 


页 面 代码 如 示例 5. 16 所 示 。 
示例 5.16 


<% 8 page language= "java" pageEncoding- "gb2312"$ > 

«HTML» 

< HEAD» 

<TITLE> 网 络 通讯 录 < /TITLE> 

«META http- equiv- Content- Language content- zh- cn> 

«META http- equiv- Content- Type content- "text/html; charset- gb2312"» 
«LINK href- "images/enter.css" type=text/css rel- stylesheet» 

< /HEAD> 

< BODY style- "BACKGROUND- IMAGE: Url (images/2e bg.jpg) "> 

<DIV align= center> 

< TABLE style- "BORDER- COLLAPSE: collapse" height- 576 cellPadding- 0 width= 990 border= 0» 


<TR> 
<TD width=230>< !-- left.html -->< $% 8 include file="left.jsp"%> 
< !--end left.html -->< /TD> 
« TD width= "677" valign="top"> 
«table width- "656" border- "0" cellspacing- "0" cellpadding- "0"> 
<TR> 
« TD height- "10" colspan= "3"></TD> 
</TR> 
<TR> 
<TD colspan= "3">< img src= "images/33e topl.jpg" width= "656" height 
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bi 
< /TD> 
</TR> 
<TR> 
<TD colspan= "3"> < img src="images/33e_top11.jpg" width- "656" height=" 
34"> 
< /TD> 
</TR> 
<TR> 
< TD width= "2$ ">< IMG height- 519 src-"images/33e left.jpg" width- 13 
border- 0» 
< /TD» 
«td width- "95$ " align= "center" valign="top" bgcolor= "# FFFFFF"» 
€«!--banner.htm] --»«$6 include file- "banner.html"$ > 
«!--end banner.html] --»«'!--main.jsp --> 
< form name- "login" action= "LoginServlet" method= "post"» 
< TABLE id-"Table 01" width-"99.99$" border-"0" cellpadding-"0" 
cellspacing- "0" 
style="font- size:l2px; font- family:Verdana, Arial, Helvetica, sans 
-serif;"» 
<TR> 
<TD valign="top" background= "image/flower/tl.jpg"><img 


Src-"../images/spacer.gif" width- "138" height="1" /> 
</TD> 
« TD valign="top" background= "image/flower/bg.jpg"> &nbsp;« /TD 


> 
« TD valign="top" background- "image/flower/m bg.jpg">< img 
src- "image/flower/tr.jpg" width= "80" height- "40" /> 
</TD> 
</TR> 
<TR> 
« TD valign="top" background- "image/flower/m tl.jpg"» &nbsp;«/ 
TD» 
< TD width-"100$ " valign="top" background- "image/flower/hbg. 
jpg" 
style="height :200px;padding:0 0 70px 30px; "> 
< TABLE width="100%" style="cellpadding: 0px; cellspacing: 
0px; margin- top: 0px; margin- Left: 0px" style-"table- layout: 
fixed;WORD- BREAK: break- all; WORD- WRAP: break- word"> 
<TR> 
<TD style= "color:# 4c4743;line-height:160% ;" valign=" 
top" 
width= "30$ "> 用 户 名 : </TD> 
<TD style= "color:# 4c4743;line- height:160% ;" valign-" 
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top">< input 
type= "text" name= "userName" />< /TD> 
</TR> 
<TR> 


<TD style= "color:# 4c4743;line- height:160$ ;" valign=" 
top" 
width- "30$ "> 密 &nbsp; gnbsp; 码 < /TD> 


<TD style- "color:# 4c4743;line- height:160$ ;" valign=" 


top"» 
«input type- "password" name- "password" />< /TD> 
</TR> 
<TR> 
<TD style= "color:# 4c4743;line- height:160$ ;" valign=" 
top" 
width= "30$ ">< INPUT type="submit" value- "提交" / 
></TD> 
<TD style= "color:# 4c4743;line- height:160$ ;" valign=" 
top">< input 
type- "reset" value- " 重 置 " />< /TD> 
</TR> 
< /TABLE> 
</TD> 
« TD width= "47" valign="top" background- "image/flower/ 
m bg.jpg"> 
&nbsp;« /TD» 
</TR> 
< /TABLE> 
< /FORM> 


< !--end main.jsp --> < /TD» 
<TD width= "3$ ">< img src= "images/33e right.jpg" width= "21" 
height= "519"> < /TD> 
</TR> 
<TR> 
« TD colspan= "3"> < img src= "images/33e down.jpg" width= "656" 
height= "15"> < /TD> 


</TR> 
< /TABLE> 
</TD> 
<TD width=85>< !--  tag.jsp --><%@ include file="tag.jsp"%> 
xE-— endtag.jsp --»«/TD» 


</TR> 
< /TABLE> 
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</DIV> 
< /BODY> 
</HTML> 


在 这 个 页 面 中 FORM 表单 编写 如 下 : 


« FORM name= "login" action= "LoginServlet" method= "post"> 
e Zr 
< /FORM> 


这 是 由 于 FORM 表单 中 涉及 了 用 户 登录 的 验证 ,所 以 在 此 应 用 了 POST 提交 请 求 。 


在 Servlet 包 中 有 LoginServlet ,进行 用 户 登 录 验 证 ,这 是 action 王 "LoginServlet" 的 作用 。 
在 LoginServlet 中 ,如果 用 户 身份 是 合法 的 , 则 转向 到 查询 当前 用 户 相关 联系 人 信息 的 
Servlet(SelectServlet) ,否则 返回 到 登录 页 面 重新 登录 。 通 过 验证 后 ,要 把 用 户 信息 (用 
户 对 象 ) 保 存 到 Session 中 ,以 便 在 会 话 中 读 取 和 进行 判断 用 户 是 否 为 登录 用 户 。 


下 面 创建 bookContent. jsp 页 面 ,该 页 面 用 于 显示 用 户 好 友 列 表 。 效 果 截 图 如 


图 5. 22 所 示 。 


Cee TE 


(boo 
{book.getN EE (bookgetPhone | (book.getMobiePh| ye 
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图 5.22 bookContent. jsp 页 面 


页 面 代码 如 示例 5. 17 所 示 。 
示例 5.17 


<% @ page language-" java" import-" java. util. * , entity. Book" pageEncoding- " 
gb2312"& > 
«HTML» 
« HEAD» 
<TITLE> 网 络 通讯 录 < /TITLE> 
«META http- equiv= Content- Language content- zh- cn» 
«META http- equiv- Content- Type content- "text/html; charset- gb2312"» 
«meta http- equiv- "pragma" content= "no- cache" 
«meta http- equiv- "cache- control" content= "no- cache" 
«LINK href- "images/enter.css" type=text/css rel- stylesheet» 
< /HEAD> 
«BODY style- "BACKGROUND- IMAGE: url (images/2e bg.jpg)"» 
<DIV align=center> 
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< TABLE style= "BORDER- COLLAPSE: collapse" height= 576 cellPadding=0 width= 990 border 
-0» 
<TR> 
<TD width=230>< !-- left.html -->< $% @ include file="left.jsp"%> 
< !--end left.html -->< /TD> 


<TD width= "677" valign="top"> 


«table width= "656" border= "0" cellspacing- "0" cellpadding- "0"> 
<TR> 
<TD height= "10" colspan= "3">< /TD> 
</TR> 
<TR> 
< TD colspan= "3">< img src= "images/33e topl.jpg" width= "656" 
height= "17">< /TD> 
</TR> 
<TR> 
< TD colspan= "3">< img src= "images/33e topll.jpg" width= "656" 
height= "34"> < /TD> 
</TR> 
<TR> 
< TD width= "2$ ">< IMG height= 519 src= "images/33e_left.jpg" 
width=13 border= 0» < /TD> 
<TD width= "95$ " align- "center" valign="top" bgcolor= "4 FFFFFF"> 
< !--banner.html --»«$6 include file- "banner.html"$ > 
< !--end banner.html 一 -> 
«table id- "Table 01" width= "99.99$ " border- "0" cellpadding- "0" cellspacing 
NI 
style-"font- size:l2px; font- family:Verdana, Arial, Helvetica, sans- serif;" 
> 
<TR> 
<TD valign= "top" background- "image/flower/t1.jpg"> 
< img src-"../images/spacer.gif" width- "138" height- "1" /»« /TD» 
<TD valign="top" background- "image/flower/bg.jpg"» &nbsp;« /TD> 
<TD valign="top" background- "image/flower/m bg.jpg"» 
< img src= "image/flower/tr.jpg" width- "80" height- "40" />< /TD> 
</TR> 
«TR» 
<TD valign="top" background- "image/flower/m tl.jpg"» &nbsp;« /TD> 
« TD width- "100% " valign="top" background- "image/flower/bg.jpg" 
style-"height:200px;padding:0 0 70px 30px; "> 
<TABLE width= "100%" Style-"cellpadding: 2px; cellspacing: 0px; margin- top: 
Opx; margin- Left: Opx" 
style-"table- layout: fixed; WORD- BREAK: break- all; WORD- WRAP: break- word" 
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border-"1" bordercolor- "$ 006633"» 
«TR align="center"> 
color: # 4c4743; line- height: 160% ;" width-"20& ">< font color-"£ 


ffOÜOff" size- 
姓名 < /£ont» « /TD> 
< TD style="color:# 4c4743; line- height:160$ ;" width-"10$"» < font color="# 
ffOÜOff" size-"3"» 
性 别 < /£ont» « /TD> 
< TD style="color:# 4c4743; line- height:160% ;" width-"30$"» < font color="# 
ffOOff" size-"3"» 
电话 < /font>< /TD» 
< TD style="color: # 4c4743; line- height:160% ;" width-"30$"» < font color-"£ 
ffOO0ff" size-"3"» 
手机 < /£ont» « /TD> 
< TD style="color: # 4c4743; line- height:160% ;" width- "10$ ">< font 
ffOO0ff" size-"3"» 
操作 < /font>< /TD> 
</TR> 
<$% 
List list = (List) request .getAttribute ("bookList") ; 
for (int i =0; i <list.size(); i++) ( 
Book book = (Book) list.get (i); 
$> 
«TR align="center"> 
<TD style= "color:# 4c4743;line- height:160% ;" width= "20$ ">< %=book. getName () % 
></TD> 
<TD style="color:# 4c4743; line- height:160% ;" width= "10$ "><%=book.getSex ()% 
></TD> 
< TD style="color: # 4c4743; line- height:160% ;" width="30% "> <% = book. getPhone 
()% ></TD> 
< TD style =" color: # 4c4743; line - height: 160%;" width=" 30%" > <% = book. 
getMobilePhone ()$ >< /TD> 
<TD width="10%"><a href= "DeleteServlet? id-« $ -book.getId() $>"> 删 除 </ 
BR></TD> 


</TR> 
<$% 
} 
$> 
< /TABLE> 
< /TD> 


<TD width= "47" valign= "top" background- "image/flower/m bg.jpg"> &nbsp;« /TD» 


</TR> 
< /TABLE> 


< !-- end main.jsp --></TD> 


2 基于 ”的 在 线 通 讯 录 — 269 


<TD width- "3$ ">< img src="images/33e right.jpg" width= "21" height="519"> 
</TD> 
</TR> 
<TR> 
« TD colspan= "3"> < img src= "images/33e down.jpg" width= "656" height="15"> 
</TD> 
</TR> 
< /TABLE» 
</TD> 
<TD width=85>< !-- tag.jsp --><%@ include file- "tag.jsp"$ ^ 
«!--  endtag.jsp --></TD> 
</TR> 
< /TABLE> 
« /DIV» 
< /BODY» 
« /HTML» 


该 页 面 获取 request 范围 内 的 数据 ,对 数据 进行 类 型 转化 ,显示 超 链接 时 ,过 A href 
—"DeleteServlet? id— — % — book. getId() 26 2 " 2 WWE Ef — / A 2 38 92 AH E (09 fii B] id 


传递 给 deleteServlet, 
下 面 创建 addBook. jsp 页 面 ,该 页 面 添加 用 户 好 友 。 效 果 截 图 如 图 5. 23 所 示 。 


5.23 addBook.jsp 页 面 


页 面 代 码 如 示例 5. 18 所 示 。 
示例 5.18 


«$8 page language- "java" import- "entity.Users" pageEncoding- "gb2312" 
contentType- "text/html;charset- gb2312" $» 
<$% 

Users user = (Users) session.getAttribute ("user"); 

if(user--null) 

response. sendRedirect ("index.jsp"); 

$> 

<HTML> 
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« HEAD» 
<TITLE> 网 络 通讯 录 < /TITLE> 
«META http- equiv- Content- Language content= zh- cn» 
«META http- equiv- Content- Type content- "text/html; charset- gb2312"» 
<LINK href- "images/enter.css" type=text/css rel- stylesheet^ 
< /HEAD> 
«BODY style= "BACKGROUND- IMAGE: Url (images/2e bg.jpg)"> 
… 省 略 美工 部 分 … 


< form name= "add" action= "AddServlet" method= "post"> 
< TABLE width-"100$"  style-"cellpadding: 0px; cellspacing: 0px; margin- top: 0px; 
margin- Left: 0px" 

Style- "table- layout: fixed;WORD- BREAK: break- all; WORD- WRAP: break- word" 


» 
<TR> 
<TD style= "color:# 4c4743; line- height:160% ;" valign="top" width= "20$ "> 
姓名 : </TD> 


<TD style- "color:# 4c4743; line- height:160$ ;" valign- "top" width= "30$ "> 
< INPUT type="text" name="name" size- "15" />< /TD> 
<TD style- "color:# 4c4743;line- height:160$ ;" valign="top" width- "20$ "> 
TESI: </TD> 
<TD style= "color:# 4c4743; line- height:160% ;" valign="top" width= "30$ "> 
<select name= "sex"> 
<option value- "Jj "» 9j « /option» 
<option value- " 女 "> 女 < /option» 
</select> </TD> 
</TR> 
<TR> 
« TD style= "color:# 4c4743; line- height:160% ;" valign= "top"width- "30% "> 
电话 : </TD> 
<TD style="color:# 4c4743;line- height:160$ ;" valign="top"> 
< INPUT type="text" name- "phone" size- "15" /> </TD> 
« TD style- "color:# 4c4743; line- height:160% ;" valign="top" width= "30$ "> 
地 址 : </TD> 
«TD style= "color:# 4c4743;line- height:160% ;" valign="top"> 
< INPUT type="text" name- "address" size- "15" /> </TD> 
</TR> 
<TR> 
<TD style- "color:# 4c4743; line- height:160$ ;" valign= "top"width- "30$ "> 
手机 : </TD> 
<TD style- "color:£ 4c4743;line- height:160$ ;" valign="top"> 
< INPUT type="text" name= "mobilePhone" size- "15" /> </TD> 
«TD style- "color:# 4c4743; line-height :160% ;" valign="top" width- "30% "> 
公司 名 称 : </TD> 
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<TD style- "color:£ 4c4743;line- height:160$ ;" valign="top"> 
< INPUT type="text" name- "company" size- "15" /> </TD> 
</TR> 
<TR> 
<TD style= "color:# 4c4743; line- height:160% ;" valign= "top" width= "30$ "> 
公司 电话 : </TD> 
<TD style="color:# 4c4743;line- height:160% ;" valign="top"> 
< INPUT type="text" name= "comPhone" size="15" /> </TD> 
<TD style= "color:# 4c4743; line- height:160% ;" valign="top" width= "30$ "> 
公司 地 址 : < /TD> 
<TD style= "color:# 4c4743;line- height:160$ ;" valign="top"> 
< INPUT type="text" name- "comAddress" size- "15" /> 


</TD> 
</TR> 
<TR> 
<TD style= "color:# 4c4743; line- height:160% ;" valign= "top" width= "30$ "> 
关系 : </TD> 


<TD style- "color:# 4c4743;line- height:160$ ;" valign="top"> 
«select name- "relation"> 
«option value- "1"» A< /option» 
<option value- "2"> 领 导 < /option» 
«option value- "3"> 师 长 < /option» 
<option value= "4"> 朋 友 < /option> 
<option value= "5"> 同 学 < /option» 


<option value= "6"> 同 事 < /option» 


</select> 
</TD> 
</TR> 
<TR> 


<td align= "right"> gnbsp;< /TD> 
<TD style- "color:# 4c4743; line- height:160$ ;" valign="top" width- "30$ "> 
« INPUT type- "submit" value- "提交 " /> </TD> 
<TD style= "color:# 4c4743;line- height:160% ;" valign="top"> 
< INPUT type- "reset" value- " 重 置 " /> </TD> 
</TR> 
< /TABLE> 
< /FORM> 
< /BODY> 
< /HTML> 


由 于 页 面 要 提交 数据 ,所 以 表单 设计 如 下 : 
< form name= "add" action= "AddServlet" method= "post"> 
在 提交 数据 时 ,调用 AddServlet. 该 类 是 获取 addBook. jsp 页 面 提交 的 数据 ,并 封装 
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到 Book 对 象 中 ,然后 通过 BookBo 类 中 insertBook (Book book) 方 法 ,向 数据 表 BOOK 
中 添加 一 条 数据 ,通过 insertBook() 方 法 的 返回 值 ,进行 操作 是 否 成 功 的 判断 ,如 果 成 功 ， 
则 显示 addBook. jsp 页 面 ,以 待 继 续 添加 ;否则 弹出 提示 信息 。 


5.7 MVC GR YF TR 


当 构建 一 个 项 目的 时 候 , 就 必须 考虑 美工 美化 界面 的 问题 。 如 果 你 在 JSP 中 实现 所 
有 的 操作 (访问 数据 库 和 逻辑 判断 ) ,美工 对 这 个 页 面 进行 美化 ,而 他 又 不 懂 JSP, 他 所 想 
的 就 是 在 页 面 上 尽 可 能 少 地 出 现 Java 代码 ,将 流程 控制 和 数据 显示 分 离 。 这 样 他 就 可 以 
很 好 地 完成 美化 界面 的 工作 了 。 

也 就 是 在 JSP 页 面 中 只 是 显示 数据 ,有 关 程 序 控制 的 功能 ,由 Servlet 来 完成 。 每 一 
种 组 件 和 技术 都 有 各 自 的 功能 和 特点 ,在 编写 程序 时 ,应 该 是 以 它们 的 功能 来 设计 它们 
的 作用 ,就 好 像 在 餐厅 吃饭 ,服务 员 把 菜谱 提供 给 顾客 ,顾客 根据 菜谱 点 菜 ,然后 把 菜单 
交 给 服务 员 ,而 服务 员 根据 菜单 中 冷 . 热 菜 的 不 同 , 交 给 不 同 的 厨师 ,厨师 做 好 后 ,把 菜 再 
交 给 服务 员 ,由 服务 员 把 菜 给 顾客 端 过 来 ,过程 如 图 5. 24 所 示 。 


ss pxeamm Fo 
"E i$ ——— HM 
5 服务 员 


顾客 点 菜 
3 
Mas s IUS 


服务 员 AH 
图 5.24 餐厅 就 餐 过 程 示意 图 


在 图 5. 24 中 ,服务 员 是 这 个 过 程 的 组 织 者 和 控制 器 (Controller) ,她 负责 接待 顾客 ， 
并 把 菜谱 显示 给 顾客 ,把 顾客 的 点 菜 内 容 ( 类 似 于 用 户 的 请 求 ) 交 给 厨师 加 工 菜 肴 (类 似 
于 进行 访问 数据 库 和 处 理 业务 的 Java 类 ) ,最 后 服务 员 把 菜肴 端 给 顾客 (类 似 于 一 个 响应 
的 JSP) 。 

在 这 个 过 程 中 ,对 于 顾客 先 看 到 的 是 菜谱 :之 后 是 整 桌 的 菜 看 。 在 程序 中 ,用 户 能 够 
看 到 的 就 是 HTML JSP 页 面 , 这 部 分 称 为 视图 (View)。 当 服务 员 把 顾客 的 点 菜 内 容 交 
给 厨师 后 ,厨师 根据 不 同 的 菜 , 采 用 不 同 的 原料 和 配料 来 加 工 菜 看 。 这 类 似 于 在 程序 中 ， 
根据 用 户 提交 不 同 的 请 求 数据 ,访问 数据 库 或 是 进行 业务 逻辑 处 理 ,这 部 分 称 为 模型 
(Model) 。 在 程序 设计 中 ,把 采用 模型 (Model) .视图 (View) .控制 器 (Controller) 的 设计 
方式 称 为 MVC 设计 模式 ,如 图 5. 25 所 示 。 

设计 模式 是 一 套 被 反复 使 用 、 成 功 的 代码 设计 经 验 的 总 结 。 模 式 必 须 是 典型 问题 
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A 5.25 MVC 示意 图 


(不 是 个 别 问题 ) 的 解决 方案 。 例 如 ,我国 的 4 宪法》 规定 只 要 具有 抢劫 行为 的 就 构成 抢 
动 罪 ,而 不 只 针对 某 一 具体 案件 来 定 以 抢 动 罪 , 如 抢 动 100 元 人 民 币 就 构成 抢劫 100 
元 罪 。 

设计 模式 为 某 一 类 问题 提供 了 解决 方案 ,同时 设计 模式 优化 了 代码 ,是 代码 更 容易 
让 别人 理解 ,提高 重用 性 ,保证 代码 的 可 靠 性 。 

MVC 是 一 种 流行 的 软件 设计 模式 , 它 把 系统 分 为 以 下 3 个 模块 。 

模型 (Model) : 对 应 的 组 件 是 JavaBean(Java 类 ) 。 

视图 (View) : 对 应 的 组 件 是 JSP 或 HTML 文件 。 

控制 器 (Controller) : 对 应 的 组 件 是 Servlet. 

模型 (Model) 可 以 分 为 业务 模型 和 数据 模型 ,它们 代表 应 用 程序 的 业务 逻辑 和 状态 。 

视图 (View) 提 供 可 交互 的 客户 界面 ,向 客户 显示 模型 数据 。 

控制 器 (Controller) 响 应 客户 的 请 求 , 根 据 客户 的 请 求 来 操作 模型 ,并 把 模型 的 响应 
结果 经 由 视图 展现 给 客户 。 

MVC 设计 模式 有 以 下 好 处 。 

(1) HARR ERF. Æ MVC 模式 中 ,3 个 层 各 司 其 职 ,所 以 如 果 哪 一 层 的 要 求 
发 生 了 变化 ,就 只 需要 更 改 相应 层 中 的 代码 ,而 不 会 影响 到 其 他 层 。 

(2) 有 利于 开发 中 的 分 工 。 在 MVC 模式 中 ,由 于 按 层 把 系统 分 开 , 那 么 就 能 更 好 地 
实现 开发 中 的 分 工 。 网 页 设计 人 员 可 以 开发 JSP 页 面 , 对 业务 熟悉 的 开发 人 员 可 以 开发 
模型 中 相关 业务 处 理 的 方法 ,而 其 他 开发 人 员 可 开发 控制 器 ,以 进行 程序 控制 。 

(3) 有 利于 组 建 的 重用 。 分 层 后 更 有 利于 组 建 的 重用 ,如 控制 层 可 独立 成 一 个 通用 
的 组 件 ,视图 层 也 可 做 成 通用 的 操作 界面 。 

MVC 最 重要 的 特点 是 把 显示 与 数据 分 离 , 这 样 就 增加 了 各 个 模块 的 可 重用 性 。 在 
使 用 MVC 模式 进行 编程 时 ,注意 各 个 组 件 的 分 工 与 协作 ,如 图 5. 26 所 示 。 

当 客户 端 发 送 请 求 时 ,服务 器 端 Servlet 接收 请 求 数据 ,并 根据 数据 ,调用 模型 中 相 
应 的 方法 访问 数据 库 ,然后 把 执行 结果 返回 给 Servlet. Servlet 根据 结果 转向 不 同 的 JSP 
过 HTML 页 面 ,以 响应 客户 端 请 求 。 

在 制作 在 线 通 讯 录 这 个 案例 时 采用 了 MVC 设计 模式 ,以 后 再 制作 这 些 类 似 的 项 目 
时 ,可 以 直接 重用 这 些 代码 ,这 也 是 使 用 MVC 设计 模式 的 好 处 。 
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图 5.26 MVC 编程 模式 
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利用 上 述 知识 完成 一 个 新 闻 发 布 系统 ,系统 界面 如 图 5. 27 所 示 。 
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图 5.27 新 闻 发 布 系统 


要 求 : 该 系统 能 够 实现 新 闻 的 增删 改 查 ,能 够 进行 一 级 标题 和 二 级 标题 的 发 布 , 例 
如 ,可 以 首先 发 布 一 级 标题 “体育 新 闻 ”, 然 后 发 布 二 级 新 闻 标 题 “ 奥 运 会 在 伦敦 成 功 


举办 ”。 


